@public-ui/sample-react 4.0.0-alpha.1 → 4.0.0-alpha.11

package/src/components/button/partials/cases.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-
-import { KolButton } from '@public-ui/react-v19';
-import { useToasterService } from '../../../hooks/useToasterService';
-import type { ButtonSampleProps } from './type';
-
-export const ButtonCases: React.FC<ButtonSampleProps> = (props) => {
-	const { children, ...other } = props;
-	const { dummyClickEventHandler } = useToasterService();
-
-	const dummyEventHandler = {
-		onClick: dummyClickEventHandler,
-	};
-
-	return (
-		<div className="flex flex-wrap gap-4">
-			<KolButton _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} {...other}>
-				{children}
-			</KolButton>
-			<KolButton _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} {...other}>
-				{children}
-			</KolButton>
-			<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} {...other}>
-				{children}
-			</KolButton>
-			<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} {...other}>
-				{children}
-			</KolButton>
-			<KolButton _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} {...other}>
-				{children}
-			</KolButton>
-			<KolButton _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler} {...other}>
-				{children}
-			</KolButton>
-		</div>
-	);
-};

package/src/components/button/partials/type.ts

@@ -1,4 +0,0 @@
-import { PropsWithChildren } from 'react';
-import type { Components } from '@public-ui/components';
-
-export type ButtonSampleProps = PropsWithChildren<Partial<Components.KolButton>>;

package/src/components/button/partials/variants.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { ButtonCases } from './cases';
-import { KolHeading } from '@public-ui/react-v19';
-import type { ButtonSampleProps } from './type';
-
-export const ButtonVariants: React.FC<ButtonSampleProps> = (props = {}) => {
-	const examples: { label: string; buttonProps: ButtonSampleProps }[] = [
-		{ label: 'Button', buttonProps: props },
-		{ label: 'Button (disabled)', buttonProps: { ...props, _disabled: true } },
-		{ label: 'Button (hideLabel)', buttonProps: { ...props, _hideLabel: true } },
-		{ label: 'Button (disabled, hideLabel)', buttonProps: { ...props, _disabled: true, _hideLabel: true } },
-	];
-
-	return (
-		<div className="grid gap-8">
-			{examples.map(({ label, buttonProps }, index) => (
-				<section key={index} className="grid gap-4">
-					<KolHeading _level={2} _label={label} />
-					<ButtonCases {...buttonProps}></ButtonCases>
-				</section>
-			))}
-		</div>
-	);
-};

package/src/components/input-text/partials/cases.tsx

@@ -1,54 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import { KolInputText } from '@public-ui/react-v19';
-
-import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
-
-import type { Components } from '@public-ui/components';
-export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextCases(props, ref) {
-	return (
-		<div className="grid gap-4">
-			<div className="black-background">
-				<KolInputText {...props} _value="Value" _label="First name (Black background test)" />
-			</div>
-			<KolInputText
-				{...props}
-				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_placeholder="With icons"
-				_icons={{
-					right: {
-						icon: 'codicon codicon-arrow-right',
-						style: {
-							'font-size': '200%',
-							'margin-right': 'calc(-8rem / var(--kolibri-root-font-size, 16))',
-						},
-					},
-				}}
-				_on={{
-					onBlur: console.log,
-					onChange: console.log,
-					onClick: console.log,
-					onFocus: console.log,
-				}}
-				_required
-				_type="search"
-				_touched
-				_label="First name (text)"
-				_accessKey="V"
-				ref={ref}
-			/>
-			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Search" _type="search" />
-			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
-			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'warning', _description: 'Small warning' }} />
-			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'success', _description: 'Success message' }} />
-			<KolInputText {...props} _placeholder="Placeholder" _label="With counter" _maxLength={10} _value="Lorem Ipsum" />
-			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="First name (text, readonly)" />
-			<KolInputText {...props} _value="Value" _readOnly _label="First name (text, readonly)" />
-			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="First name (text, disabled)" />
-			<KolInputText {...props} _value="Value" _disabled _label="First name (text, disabled)" />
-			<KolInputText {...props} _value="Value" _label="With access key" _accessKey="c" />
-			<KolInputText {...props} _value="Value" _label="With short key" _shortKey="s" />
-		</div>
-	);
-});

package/src/components/input-text/partials/variants.tsx

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import { InputTextCases } from './cases';
-
-import type { Components } from '@public-ui/components';
-import { SampleColumns } from '../../SampleColumns';
-export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextVariant(props, ref) {
-	return (
-		<SampleColumns>
-			<fieldset>
-				<legend>Text</legend>
-				<InputTextCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Text (hideLabel)</legend>
-				<InputTextCases ref={ref} {...props} _hideLabel />
-			</fieldset>
-		</SampleColumns>
-	);
-});

package/src/scenarios/custom-tooltip-width.tsx

@@ -1,33 +0,0 @@
-import type { FC } from 'react';
-import React from 'react';
-
-import { KolButton } from '@public-ui/react-v19';
-import { SampleDescription } from '../components/SampleDescription';
-import { useToasterService } from '../hooks/useToasterService';
-
-export const CustomTooltipWidth: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
-
-	const dummyEventHandler = {
-		onClick: dummyClickEventHandler,
-	};
-
-	return (
-		<>
-			<SampleDescription>
-				<p>
-					This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
-					parent elements.
-				</p>
-			</SampleDescription>
-
-			<KolButton
-				_label="Tooltip with fixed width"
-				_hideLabel
-				style={{ '--kol-tooltip-width': '400px' }}
-				_icons="codicon codicon-reactions"
-				_on={dummyEventHandler}
-			></KolButton>
-		</>
-	);
-};