@public-ui/sample-react 1.7.0-rc.9 → 1.7.1

package/src/components/table/sort-date.tsx

@@ -30,4 +30,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortTabel: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;
+export const TableSortTable: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/table/with-pagination.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+import { KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders } from '@public-ui/components';
+import { KoliBriTablePaginationProps } from '@public-ui/components/src';
+import { DATA } from './test-data';
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Order', key: 'order' },
+			{ label: 'Date', key: 'date' },
+		],
+	],
+};
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _total: 1 };
+
+export const TableWithPagination: FC = () => (
+	<div>
+		<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
+	</div>
+);

package/src/components/tabs/basic.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { KolTabs } from '@public-ui/react';
+
+const tabs = [
+	{
+		_icons: 'codicon codicon-pie-chart',
+		_label: 'Erster Tab',
+	},
+	{
+		_icons: 'codicon codicon-calendar',
+		_label: 'Zweites Tab',
+	},
+	{
+		_disabled: true,
+		_icons: 'codicon codicon-briefcase',
+		_label: 'Deaktiviertes Tab',
+	},
+	{
+		_icons: 'codicon codicon-telescope',
+		_label: 'Letzter Tab',
+	},
+];
+export const TabsBasic: FC = () => (
+	<KolTabs _tabs={tabs}>
+		<div slot="tab-0">Inhalte von Tab 1</div>
+		<div slot="tab-1">Inhalte von Tab 2</div>
+		<div slot="tab-2">Inhalte von Tab 3</div>
+		<div slot="tab-3">Inhalte von Tab 4</div>
+	</KolTabs>
+);

package/src/components/tabs/icons-only.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { KolTabs } from '@public-ui/react';
+
+const tabs = [
+	{
+		_icons: 'codicon codicon-pie-chart',
+		_label: 'Erster Tab',
+		_hideLabel: true,
+	},
+	{
+		_icons: 'codicon codicon-calendar',
+		_label: 'Zweites Tab',
+		_hideLabel: true,
+	},
+	{
+		_disabled: true,
+		_icons: 'codicon codicon-briefcase',
+		_label: 'Deaktiviertes Tab',
+		_hideLabel: true,
+	},
+	{
+		_icons: 'codicon codicon-telescope',
+		_label: 'Letzter Tab',
+		_hideLabel: true,
+	},
+];
+export const TabsIconsOnly: FC = () => (
+	<KolTabs _tabs={tabs}>
+		<div slot="tab-0">Inhalte von Tab 1</div>
+		<div slot="tab-1">Inhalte von Tab 2</div>
+		<div slot="tab-2">Inhalte von Tab 3</div>
+		<div slot="tab-3">Inhalte von Tab 4</div>
+	</KolTabs>
+);

package/src/components/tabs/routes.ts

@@ -0,0 +1,11 @@
+import { Routes } from '../../shares/types';
+
+import { TabsBasic } from './basic';
+import { TabsIconsOnly } from './icons-only';
+
+export const TABS_ROUTES: Routes = {
+	tabs: {
+		basic: TabsBasic,
+		'icons-only': TabsIconsOnly,
+	},
+};

package/src/components/textarea/adjust-height.tsx

@@ -13,10 +13,10 @@ sit amet.`;
 export const TextareaAdjustHeight: FC = () => (
 	<KolForm className="row">
 		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _id="text-vertical" _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
+			<KolTextarea _adjustHeight={true} _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
 		</div>
 		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _id="text-none" _resize="none" _value={VALUE} _label="Texteingabe (none)" />
+			<KolTextarea _adjustHeight={true} _resize="none" _value={VALUE} _label="Texteingabe (none)" />
 		</div>
 	</KolForm>
 );

package/src/components/textarea/basic.tsx

@@ -1,11 +1,5 @@
-import React from 'react';
-import { KolForm, KolTextarea } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { TextareaVariants } from './partials/variants';
 
-import { FC } from 'react';
-import { ERROR_MSG } from '../../shares/constants';
-
-export const TextareaBasic: FC = () => (
-	<KolForm>
-		<KolTextarea _id="text" _error={ERROR_MSG} _label="Texteingabe" />
-	</KolForm>
-);
+export const TextareaBasic: FC = () => <FormWrap RefComponent={TextareaVariants} />;

package/src/components/textarea/counter.tsx

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { KolTextarea } from '@public-ui/react';
+
+export const TextareaCounter: FC = () => (
+	<KolTextarea _hasCounter={true} _label="Textara mit Counter und Hint und Fehler" _error={'oh no'} _hint={'Hinweis'} _touched />
+);

package/src/components/textarea/disabled.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaDisabled: FC = () => (
 	<KolForm>
-		<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _id="text" _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+		<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
 	</KolForm>
 );

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

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { KolTextarea } from '@public-ui/react';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolTextarea {...props} ref={ref} _error={ERROR_MSG} _label="Text" _touched />
+			<KolTextarea {...props} ref={ref} _label="Text (3 rows)" _rows={3} />
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { TextareaCases } from './cases';
+
+export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<TextareaCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<TextareaCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/textarea/placeholder.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaPlaceholder: FC = () => (
 	<KolForm>
-		<KolTextarea _id="text" _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
+		<KolTextarea _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
 	</KolForm>
 );

package/src/components/textarea/readonly.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaReadOnly: FC = () => (
 	<KolForm>
-		<KolTextarea _error="Es ist ein Fehler aufgetreten." _id="text" _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+		<KolTextarea _error="Es ist ein Fehler aufgetreten." _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
 	</KolForm>
 );

package/src/components/textarea/resize.tsx

@@ -5,9 +5,9 @@ import { FC } from 'react';
 
 export const TextareaResize: FC = () => (
 	<KolForm className="grid gap-4">
-		<KolTextarea _id="text-both" _resize="both" _label="Texteingabe (both)" />
-		<KolTextarea _id="text-verical" _resize="vertical" _label="Texteingabe (vertical)" />
-		<KolTextarea _id="text-horizontal" _resize="horizontal" _label="Texteingabe (horizontal)" />
-		<KolTextarea _id="text-none" _resize="none" _label="Texteingabe (none)" />
+		<KolTextarea _resize="both" _label="Texteingabe (both)" />
+		<KolTextarea _resize="vertical" _label="Texteingabe (vertical)" />
+		<KolTextarea _resize="horizontal" _label="Texteingabe (horizontal)" />
+		<KolTextarea _resize="none" _label="Texteingabe (none)" />
 	</KolForm>
 );

package/src/components/textarea/routes.ts

@@ -13,6 +13,7 @@ import { TextareaReadOnly } from './readonly';
 import { TextareaResize } from './resize';
 
 import { TextareaRows } from './rows';
+import { TextareaCounter } from './counter';
 
 export const TEXTAREA_ROUTES: Routes = {
 	textarea: {
@@ -23,5 +24,6 @@ export const TEXTAREA_ROUTES: Routes = {
 		readonly: TextareaReadOnly,
 		resize: TextareaResize,
 		rows: TextareaRows,
+		'with-counter': TextareaCounter,
 	},
 };

package/src/components/textarea/rows.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaRows: FC = () => (
 	<KolForm>
-		<KolTextarea _id="text" _rows={10} _label="Texteingabe" />
+		<KolTextarea _rows={10} _label="Texteingabe" />
 	</KolForm>
 );

package/src/components/toast/basic.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { KolButton, KolToast } from '@public-ui/react';
 import { ToasterService } from '@public-ui/components';
+import { KolButton } from '@public-ui/react';
+import React from 'react';
 
 const toaster = ToasterService.getInstance(document);
 

package/src/components/types.tsx

@@ -0,0 +1,42 @@
+import { FormWrap } from './FormWrap';
+import { ButtonVariants } from './button/partials/variants';
+import { InputCheckboxVariants } from './input-checkbox/partials/variants';
+import { InputColorVariants } from './input-color/partials/variants';
+import { InputDateVariants } from './input-date/partials/variants';
+import { InputEmailVariants } from './input-email/partials/variants';
+import { InputFileVariants } from './input-file/partials/variants';
+import { InputNumberVariants } from './input-number/partials/variants';
+import { InputPasswordVariants } from './input-password/partials/variants';
+import { InputRadioVariants } from './input-radio/partials/variants';
+import { InputRangeVariants } from './input-range/partials/variants';
+import { InputTextVariants } from './input-text/partials/variants';
+import { SelectVariants } from './select/partials/variants';
+import { TextareaVariants } from './textarea/partials/variants';
+
+export type RefFormComponent =
+	| typeof InputCheckboxVariants
+	| typeof InputColorVariants
+	| typeof InputDateVariants
+	| typeof InputEmailVariants
+	| typeof InputFileVariants
+	| typeof InputNumberVariants
+	| typeof InputPasswordVariants
+	| typeof InputRadioVariants
+	| typeof InputRangeVariants
+	| typeof InputTextVariants
+	| typeof SelectVariants
+	| typeof TextareaVariants;
+
+export type RefComponent =
+	// | typeof AbbrVariants
+	// | typeof AccordionVariants
+	// | typeof AlertVariants
+	| typeof ButtonVariants
+	// | typeof ButtonLinkVariants
+	// | typeof CardVariants
+	// | typeof LinkVariants
+	// | typeof LinkButtonVariants
+	// | typeof PopoverVariants
+	// | typeof SplitButtonVariants
+	// | typeof TabsVariants
+	| RefFormComponent;

package/src/shares/routes.ts

@@ -40,6 +40,12 @@ import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
 import { Routes } from './types';
+import { IMAGE_ROUTES } from '../components/image/routes';
+import { KOLIBRI_ROUTES } from '../components/kolibri/routes';
+import { LOGO_ROUTES } from '../components/logo/routes';
+import { MODAL_ROUTES } from '../components/modal/routes';
+import { QUOTE_ROUTES } from '../components/quote/routes';
+import { TABS_ROUTES } from '../components/tabs/routes';
 
 export const ROUTES: Routes = {
 	...HANDOUT_ROUTES,
@@ -49,14 +55,15 @@ export const ROUTES: Routes = {
 	...AVATAR_ROUTES,
 	...BADGE_ROUTES,
 	...BREADCRUMB_ROUTES,
-	...BUTTON_ROUTES,
-	...BUTTON_LINK_ROUTES,
 	...BUTTON_GROUP_ROUTES,
+	...BUTTON_LINK_ROUTES,
+	...BUTTON_ROUTES,
 	...CARD_ROUTES,
 	...DETAILS_ROUTES,
 	...FORM_ROUTES,
 	...HEADING_ROUTES,
 	...ICON_ROUTES,
+	...IMAGE_ROUTES,
 	...INDENTED_ROUTES,
 	...INPUT_CHECKBOX_ROUTES,
 	...INPUT_COLOR_ROUTES,
@@ -68,19 +75,24 @@ export const ROUTES: Routes = {
 	...INPUT_RADIO_ROUTES,
 	...INPUT_RANGE_ROUTES,
 	...INPUT_TEXT_ROUTES,
-	...LINK_ROUTES,
+	...KOLIBRI_ROUTES,
 	...LINK_BUTTON_ROUTES,
 	...LINK_GROUP_ROUTES,
+	...LINK_ROUTES,
+	...LOGO_ROUTES,
+	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
 	...POPOVER_ROUTES,
 	...PROGRESS_ROUTES,
+	...QUOTE_ROUTES,
 	...SELECT_ROUTES,
 	...SELECT_ROUTES,
 	...SKIP_NAV_ROUTES,
 	...SPIN_ROUTES,
 	...SPLIT_BUTTON_ROUTES,
 	...TABLE_ROUTES,
+	...TABS_ROUTES,
 	...TEXTAREA_ROUTES,
 	...TOAST_ROUTES,
 	...VERSION_ROUTES,

package/src/style.scss

@@ -1,3 +1,11 @@
+* {
+	font-family: Verdana;
+}
+
+body {
+	margin: 0;
+}
+
 dl,
 hr {
 	margin: 0;
@@ -19,10 +27,6 @@ hr {
 	grid-template-columns: auto auto;
 }
 
-.app-sidebar {
-	font-family: sans-serif;
-}
-
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
@@ -36,8 +40,9 @@ hr {
 }
 
 @media print {
+
 	.no-print,
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/tsconfig.json

@@ -9,7 +9,7 @@
 		"preserveSymlinks": true,
 		"moduleResolution": "node",
 		"lib": ["es2017", "dom"],
-		"types": ["@public-ui/components", "mocha", "node", "react", "react-dom"],
+		"types": ["node", "react", "react-dom"],
 		"typeRoots": ["node_modules/@types", "src/types"],
 		"noUnusedLocals": true,
 		"resolveJsonModule": true,
@@ -27,6 +27,5 @@
 		"jsxFactory": "React.createElement",
 		"jsxFragmentFactory": "React.Fragment"
 	},
-	"include": ["src/**/*", "tests/**/*", "node_modules/@leanup/**/*", "decs.d.ts"],
-	"exclude": ["node_modules/@leanup/**/template/**/*"]
+	"include": ["src/**/*"]
 }

package/src/components/button-link/target.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { KolAlert, KolButtonLink } from '@public-ui/react';
-
-import { FC } from 'react';
-
-export const ButtonLinkTarget: FC = () => (
-	<div className="grid gap-4">
-		<KolAlert _type="info">Bei einem semantischen Button der als Link dargestellt wird, gibt es kein Target!</KolAlert>
-		<KolButtonLink _href="#" _label="Ich bin ein Link ohne Target" />
-		<KolButtonLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />
-		<KolButtonLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
-		<KolButtonLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />
-		<KolButtonLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />
-		<KolButtonLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
-	</div>
-);

package/src/components/input-text/hidden-label.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { KolForm, KolInputText } from '@public-ui/react';
-
-import { FC } from 'react';
-
-import { ERROR_MSG, HINT_MSG } from '../../shares/constants';
-
-export const InputTextHiddenLabel: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputText
-			_id=""
-			_hint={HINT_MSG}
-			_hideLabel
-			_error={ERROR_MSG}
-			_placeholder="Mit Icons"
-			_icon={{
-				left: 'codicon codicon-arrow-left',
-				right: {
-					icon: 'codicon codicon-arrow-right',
-					style: {
-						'font-size': '200%',
-					},
-				},
-			}}
-			_required
-			_smartButton={{
-				_icon: {
-					left: {
-						icon: 'codicon codicon-eye',
-					},
-				},
-				_hideLabel: true,
-				_label: 'Passwort anzeigen',
-				_on: {
-					onClick: () => {},
-				},
-			}}
-			_type="search"
-			_label="Suche"
-		/>
-		<KolInputText
-			_id=""
-			_error={ERROR_MSG}
-			_hideLabel
-			_placeholder="Mit Icons"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-			_type="search"
-			_label="Suche"
-		/>
-		<KolInputText _id="" _hideLabel _placeholder="Placeholder" _label="Vorname (text)" _required />
-		<KolInputText _id="" _placeholder="Placeholder" _type="search" _label="Suche (search)" />
-		<KolInputText _id="vorname" _placeholder="Placeholder" _error={ERROR_MSG} _type="url" _label="URL (url)" />
-		<KolInputText _id="" _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
-		<KolInputText _id="" _placeholder="Placeholder" _read-only _label="Vorname (text, readonly)" />
-		<KolInputText _id="" _value="Value" _read-only _label="Vorname (text, readonly)" />
-		<KolInputText _id="" _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
-		<KolInputText _id="" _value="Value" _disabled _label="Vorname (text, disabled)" />
-	</KolForm>
-);

package/test-build.sh

@@ -1,2 +0,0 @@
-cd "$(dirname "$0")"
-npm run build -- --output-path=$1