@public-ui/sample-react 1.7.0-rc.11 → 1.7.0-rc.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/.eslintrc.js +5 -0
  2. package/package.json +8 -10
  3. package/public/index.html +1 -1
  4. package/src/App.tsx +10 -4
  5. package/src/components/handout/basic.tsx +1 -1
  6. package/src/components/image/basic.tsx +5 -0
  7. package/src/components/image/routes.ts +9 -0
  8. package/src/components/input-checkbox/basic.tsx +3 -36
  9. package/src/components/input-checkbox/button.tsx +4 -0
  10. package/src/components/input-checkbox/partials/variants.tsx +69 -0
  11. package/src/components/input-checkbox/routes.ts +4 -0
  12. package/src/components/input-checkbox/switch.tsx +4 -0
  13. package/src/components/input-text/focus.tsx +1 -1
  14. package/src/components/kolibri/animated.tsx +4 -0
  15. package/src/components/kolibri/basic.tsx +4 -0
  16. package/src/components/kolibri/no-label.tsx +4 -0
  17. package/src/components/kolibri/routes.ts +13 -0
  18. package/src/components/link-group/basic.tsx +9 -0
  19. package/src/components/link-group/horizontal.tsx +9 -0
  20. package/src/components/link-group/routes.ts +6 -1
  21. package/src/components/logo/basic.tsx +5 -0
  22. package/src/components/logo/routes.ts +9 -0
  23. package/src/components/modal/basic.tsx +37 -0
  24. package/src/components/modal/routes.ts +9 -0
  25. package/src/components/quote/basic.tsx +6 -0
  26. package/src/components/quote/block.tsx +17 -0
  27. package/src/components/quote/routes.ts +11 -0
  28. package/src/components/tabs/basic.tsx +30 -0
  29. package/src/components/tabs/icons-only.tsx +34 -0
  30. package/src/components/tabs/routes.ts +11 -0
  31. package/src/components/textarea/counter.tsx +6 -0
  32. package/src/components/textarea/routes.ts +2 -0
  33. package/src/components/toast/basic.tsx +2 -2
  34. package/src/shares/routes.ts +15 -3
  35. package/tsconfig.json +2 -3
  36. package/test-build.sh +0 -2
package/.eslintrc.js CHANGED
@@ -1,5 +1,9 @@
1
1
  const config = require('@leanup/stack/.eslintrc');
2
2
 
3
+ config.parserOptions = {
4
+ tsconfigRootDir: __dirname,
5
+ };
6
+
3
7
  config.overrides = config.overrides || [];
4
8
  config.overrides.push({
5
9
  extends: ['plugin:react/recommended', 'plugin:jsx-a11y/recommended'],
@@ -10,6 +14,7 @@ config.overrides.push({
10
14
  },
11
15
  },
12
16
  rules: {
17
+ '@typescript-eslint/no-unsafe-member-access': 'warn',
13
18
  'react/no-unused-state': 'error',
14
19
  },
15
20
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/sample-react",
3
- "version": "1.7.0-rc.11",
3
+ "version": "1.7.0-rc.13",
4
4
  "description": "This app contains samples for the KoliBri/Public UI",
5
5
  "license": "EUPL-1.2",
6
6
  "scripts": {
@@ -16,21 +16,19 @@
16
16
  "postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
17
17
  "postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot"
18
18
  },
19
- "bin": {
20
- "kolibri-sample-react-test-build": "test-build.sh"
21
- },
22
19
  "dependencies": {
23
20
  "@leanup/stack": "1.3.48",
24
21
  "@leanup/stack-react": "1.3.48",
25
22
  "@leanup/stack-webpack": "1.3.48",
26
23
  "@public-oss/kolibri-themes": "0.0.3",
27
- "@public-ui/components": "1.7.0-rc.11",
28
- "@public-ui/react": "1.7.0-rc.11",
29
- "@public-ui/themes": "1.7.0-rc.11",
30
- "@types/react": "18.2.21",
24
+ "@public-ui/components": "1.7.0-rc.13",
25
+ "@public-ui/react": "1.7.0-rc.13",
26
+ "@public-ui/themes": "1.7.0-rc.13",
27
+ "@types/node": "20.6.2",
28
+ "@types/react": "18.2.22",
31
29
  "@types/react-dom": "18.2.7",
32
- "@unocss/preset-uno": "0.55.7",
33
- "@unocss/webpack": "0.55.7",
30
+ "@unocss/preset-uno": "0.56.0",
31
+ "@unocss/webpack": "0.56.0",
34
32
  "ajv": "8.12.0",
35
33
  "chromedriver": "116.0.0",
36
34
  "cpy-cli": "5.0.0",
package/public/index.html CHANGED
@@ -18,7 +18,7 @@
18
18
  <link rel="stylesheet" href="assets/tabler-icons/tabler-icons.css" />
19
19
  <link rel="stylesheet" href="main.css" />
20
20
  <meta name="robots" content="noindex" />
21
- <meta name="kolibri" content="dev-mode=true" />
21
+ <meta name="kolibri" content="dev-mode=false" />
22
22
  </head>
23
23
  <body>
24
24
  <div id="app"></div>
package/src/App.tsx CHANGED
@@ -6,7 +6,7 @@ import { Option } from '@public-ui/components';
6
6
  import { KolAlert } from '@public-ui/react';
7
7
  import { ROUTES } from './shares/routes';
8
8
  import { Theme, THEME_OPTIONS } from './shares/theme';
9
- import PackageJson from '../package.json';
9
+ import PackageJson from '@public-ui/components/package.json';
10
10
  import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
11
11
  import { Sidebar } from './components/Sidebar';
12
12
  import { useLocation } from 'react-router';
@@ -43,10 +43,16 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
43
43
  path={`${path}/all`}
44
44
  element={
45
45
  <div className="d-grid gap-4">
46
- {THEME_OPTIONS.filter((theme) => ['bmf', 'zoll-v2'].indexOf((theme as Option<Theme>).value) >= 0).map((theme) => (
46
+ {THEME_OPTIONS.filter(
47
+ (theme) => ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2'].indexOf((theme as Option<Theme>).value) >= 0,
48
+ ).map((theme) => (
47
49
  <div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
48
- <strong>{theme.label}</strong>
49
- <ThisRoute />
50
+ <div className="mt-4">
51
+ <strong>{theme.label}</strong>
52
+ </div>
53
+ <div className="my-2">
54
+ <ThisRoute />
55
+ </div>
50
56
  <hr aria-hidden="true" />
51
57
  </div>
52
58
  ))}
package/src/components/handout/basic.tsx CHANGED
@@ -1005,7 +1005,7 @@ export const HandoutBasic: FC = () => (
1005
1005
  </div>
1006
1006
  </KolCard>
1007
1007
  </div>
1008
- <KolVersion _version={PackageJson.version}></KolVersion>
1008
+ <KolVersion _version="5.0.2-test.2"></KolVersion>
1009
1009
  {/* <KolImage _src="assets/images/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
1010
1010
  {/* <KolIndentedText></KolIndentedText> */}
1011
1011
  {/* <KolQuote></KolQuote> */}
package/src/components/image/basic.tsx ADDED
@@ -0,0 +1,5 @@
1
+ import { FC } from 'react';
2
+ import { KolImage } from '@public-ui/react';
3
+ import React from 'react';
4
+
5
+ export const ImageBasic: FC = () => <KolImage _src="https://placehold.co/100x100/cc006e/white" _alt="Beispielbild: 100 × 100" />;
package/src/components/image/routes.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { ImageBasic } from './basic';
4
+
5
+ export const IMAGE_ROUTES: Routes = {
6
+ image: {
7
+ basic: ImageBasic,
8
+ },
9
+ };
package/src/components/input-checkbox/basic.tsx CHANGED
@@ -1,37 +1,4 @@
1
- import React from 'react';
2
- import { KolInputCheckbox } from '@public-ui/react';
1
+ import React, { FC } from 'react';
2
+ import { InputCheckboxVariant } from './partials/variants';
3
3
 
4
- import { FC } from 'react';
5
-
6
- import { ERROR_MSG } from '../../shares/constants';
7
-
8
- export const InputCheckboxBasic: FC = () => (
9
- <>
10
- <fieldset>
11
- <legend>Checkbox</legend>
12
- <KolInputCheckbox _variant="checkbox" _label="Nicht ausgewählt" _value={false} />
13
- <KolInputCheckbox _variant="checkbox" _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
14
- <KolInputCheckbox _variant="checkbox" _label="Ausgewählt" _value={true} _checked />
15
- <KolInputCheckbox _variant="checkbox" _label="Disabled" _value={true} _disabled />
16
- <KolInputCheckbox _variant="checkbox" _label="Mit Fehler" _value={true} _error={ERROR_MSG} _touched />
17
- </fieldset>
18
-
19
- <fieldset>
20
- <legend>Switch</legend>
21
- <KolInputCheckbox _variant="switch" _label="Nicht ausgewählt" _value={false} />
22
- <KolInputCheckbox _variant="switch" _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
23
- <KolInputCheckbox _variant="switch" _label="Ausgewählt" _value={true} _checked />
24
- <KolInputCheckbox _variant="switch" _label="Disabled" _value={true} _disabled />
25
- <KolInputCheckbox _variant="switch" _label="Mit Fehler" _value={true} _error={ERROR_MSG} _touched />
26
- </fieldset>
27
-
28
- <fieldset>
29
- <legend>Button</legend>
30
- <KolInputCheckbox _variant="button" _label="Nicht ausgewählt" _value={false} />
31
- <KolInputCheckbox _variant="button" _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
32
- <KolInputCheckbox _variant="button" _label="Ausgewählt" _value={true} _checked />
33
- <KolInputCheckbox _variant="button" _label="Disabled" _value={true} _disabled />
34
- <KolInputCheckbox _variant="button" _label="Mit Fehler" _value={true} _error={ERROR_MSG} _touched />
35
- </fieldset>
36
- </>
37
- );
4
+ export const InputCheckboxBasic: FC = () => <InputCheckboxVariant variant="checkbox" />;
package/src/components/input-checkbox/button.tsx ADDED
@@ -0,0 +1,4 @@
1
+ import React, { FC } from 'react';
2
+ import { InputCheckboxVariant } from './partials/variants';
3
+
4
+ export const InputCheckboxButton: FC = () => <InputCheckboxVariant variant="button" />;
package/src/components/input-checkbox/partials/variants.tsx ADDED
@@ -0,0 +1,69 @@
1
+ import { KolInputCheckbox } from '@public-ui/react';
2
+ import React, { FC, useRef, useLayoutEffect } from 'react';
3
+ import { ERROR_MSG } from '../../../shares/constants';
4
+
5
+ type Props = {
6
+ variant: 'checkbox' | 'switch' | 'button';
7
+ };
8
+
9
+ export const InputCheckboxVariant: FC<Props> = ({ variant }) => {
10
+ const ref = useRef<HTMLKolInputCheckboxElement | null>(null);
11
+
12
+ useLayoutEffect(() => {
13
+ setTimeout(() => {
14
+ ref.current?.focus();
15
+ }, 500);
16
+ }, [ref]);
17
+
18
+ return (
19
+ <fieldset>
20
+ <legend>Checkbox ({variant})</legend>
21
+ <KolInputCheckbox
22
+ _icon={{
23
+ unchecked: 'codicon codicon-close',
24
+ }}
25
+ _variant={variant}
26
+ _label="Nicht ausgewählt"
27
+ _value={false}
28
+ />
29
+ <KolInputCheckbox
30
+ _icon={{
31
+ unchecked: 'codicon codicon-close',
32
+ }}
33
+ _variant={variant}
34
+ _label="Unbestimmt (Indeterminate)"
35
+ _value={null}
36
+ _indeterminate
37
+ />
38
+ <KolInputCheckbox
39
+ _icon={{
40
+ unchecked: 'codicon codicon-close',
41
+ }}
42
+ _variant={variant}
43
+ _label="Ausgewählt"
44
+ _value={true}
45
+ _checked
46
+ />
47
+ <KolInputCheckbox
48
+ _icon={{
49
+ unchecked: 'codicon codicon-close',
50
+ }}
51
+ _variant={variant}
52
+ _label="Disabled"
53
+ _value={true}
54
+ _disabled
55
+ />
56
+ <KolInputCheckbox
57
+ ref={ref}
58
+ _icon={{
59
+ unchecked: 'codicon codicon-close',
60
+ }}
61
+ _variant={variant}
62
+ _label="Mit Fehler"
63
+ _value={true}
64
+ _error={ERROR_MSG}
65
+ _touched
66
+ />
67
+ </fieldset>
68
+ );
69
+ };
package/src/components/input-checkbox/routes.ts CHANGED
@@ -1,9 +1,13 @@
1
1
  import { Routes } from '../../shares/types';
2
2
 
3
3
  import { InputCheckboxBasic } from './basic';
4
+ import { InputCheckboxButton } from './button';
5
+ import { InputCheckboxSwitch } from './switch';
4
6
 
5
7
  export const INPUT_CHECKBOX_ROUTES: Routes = {
6
8
  'input-checkbox': {
7
9
  basic: InputCheckboxBasic,
10
+ switch: InputCheckboxSwitch,
11
+ button: InputCheckboxButton,
8
12
  },
9
13
  };
package/src/components/input-checkbox/switch.tsx ADDED
@@ -0,0 +1,4 @@
1
+ import React, { FC } from 'react';
2
+ import { InputCheckboxVariant } from './partials/variants';
3
+
4
+ export const InputCheckboxSwitch: FC = () => <InputCheckboxVariant variant="switch" />;
package/src/components/input-text/focus.tsx CHANGED
@@ -9,7 +9,7 @@ export const InputTextFocus: FC = () => {
9
9
  useLayoutEffect(() => {
10
10
  setTimeout(() => {
11
11
  ref.current?.focus();
12
- }, 100);
12
+ }, 500);
13
13
  }, [ref]);
14
14
 
15
15
  return (
package/src/components/kolibri/animated.tsx ADDED
@@ -0,0 +1,4 @@
1
+ import React, { FC } from 'react';
2
+ import { KolKolibri } from '@public-ui/react';
3
+
4
+ export const KolibriAnimated: FC = () => <KolKolibri _animate style={{ width: 300 }}></KolKolibri>;
package/src/components/kolibri/basic.tsx ADDED
@@ -0,0 +1,4 @@
1
+ import React, { FC } from 'react';
2
+ import { KolKolibri } from '@public-ui/react';
3
+
4
+ export const KolibriBasic: FC = () => <KolKolibri style={{ width: 300 }} />;
package/src/components/kolibri/no-label.tsx ADDED
@@ -0,0 +1,4 @@
1
+ import React, { FC } from 'react';
2
+ import { KolKolibri } from '@public-ui/react';
3
+
4
+ export const KolibriNoLabel: FC = () => <KolKolibri _labeled={false} style={{ width: 300 }}></KolKolibri>;
package/src/components/kolibri/routes.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { KolibriBasic } from './basic';
4
+ import { KolibriAnimated } from './animated';
5
+ import { KolibriNoLabel } from './no-label';
6
+
7
+ export const KOLIBRI_ROUTES: Routes = {
8
+ kolibri: {
9
+ basic: KolibriBasic,
10
+ animated: KolibriAnimated,
11
+ 'no-label': KolibriNoLabel,
12
+ },
13
+ };
package/src/components/link-group/basic.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import React, { FC } from 'react';
2
+ import { KolLinkGroup } from '@public-ui/react';
3
+
4
+ const links = [
5
+ { _label: 'Link 1', _href: 'https://www.w3.org' },
6
+ { _label: 'Link 2', _href: 'https://www.w3.org' },
7
+ { _label: 'Link 3', _href: 'https://www.w3.org' },
8
+ ];
9
+ export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} />;
package/src/components/link-group/horizontal.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import React, { FC } from 'react';
2
+ import { KolLinkGroup } from '@public-ui/react';
3
+
4
+ const links = [
5
+ { _label: 'Link 1', _href: 'https://www.w3.org' },
6
+ { _label: 'Link 2', _href: 'https://www.w3.org' },
7
+ { _label: 'Link 3', _href: 'https://www.w3.org' },
8
+ ];
9
+ export const LinkGroupHorizontal: FC = () => <KolLinkGroup _links={links} _orientation="horizontal" />;
package/src/components/link-group/routes.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import { Routes } from '../../shares/types';
2
+ import { LinkGroupBasic } from './basic';
3
+ import { LinkGroupHorizontal } from './horizontal';
2
4
 
3
5
  export const LINK_GROUP_ROUTES: Routes = {
4
- 'link-group': {},
6
+ 'link-group': {
7
+ basic: LinkGroupBasic,
8
+ horizontal: LinkGroupHorizontal,
9
+ },
5
10
  };
package/src/components/logo/basic.tsx ADDED
@@ -0,0 +1,5 @@
1
+ import React, { FC } from 'react';
2
+ import { KolLogo } from '@public-ui/react';
3
+ import { Bundesministerium } from '@public-ui/components';
4
+
5
+ export const LogoBasic: FC = () => <KolLogo _org={Bundesministerium['Die Bundesregierung']} style={{ width: 300 }} />;
package/src/components/logo/routes.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { LogoBasic } from './basic';
4
+
5
+ export const LOGO_ROUTES: Routes = {
6
+ logo: {
7
+ basic: LogoBasic,
8
+ },
9
+ };
package/src/components/modal/basic.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import React, { FC, useRef } from 'react';
2
+ import { KolButton, KolCard, KolModal } from '@public-ui/react';
3
+
4
+ export const ModalBasic: FC = () => {
5
+ const modalElement = useRef<HTMLKolModalElement>(null);
6
+
7
+ return (
8
+ <div>
9
+ <KolModal _ariaLabel="" _width="80%" ref={modalElement}>
10
+ <KolCard _heading="Ich bin ein Modal" style={{ width: '100%' }}>
11
+ <div slot="content">
12
+ <KolButton
13
+ _label="Schließen"
14
+ _on={{
15
+ onClick: () => {
16
+ if (modalElement?.current) {
17
+ modalElement.current._activeElement = null;
18
+ }
19
+ },
20
+ }}
21
+ />
22
+ </div>
23
+ </KolCard>
24
+ </KolModal>
25
+ <KolButton
26
+ _label="Modal öffnen"
27
+ _on={{
28
+ onClick: (event: Event) => {
29
+ if (modalElement?.current) {
30
+ modalElement.current._activeElement = event.target as HTMLElement;
31
+ }
32
+ },
33
+ }}
34
+ />
35
+ </div>
36
+ );
37
+ };
package/src/components/modal/routes.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { ModalBasic } from './basic';
4
+
5
+ export const MODAL_ROUTES: Routes = {
6
+ modal: {
7
+ basic: ModalBasic,
8
+ },
9
+ };
package/src/components/quote/basic.tsx ADDED
@@ -0,0 +1,6 @@
1
+ import React, { FC } from 'react';
2
+ import { KolQuote } from '@public-ui/react';
3
+
4
+ export const QuoteBasic: FC = () => (
5
+ <KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
6
+ );
package/src/components/quote/block.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import React, { FC } from 'react';
2
+ import { KolQuote } from '@public-ui/react';
3
+
4
+ export const QuoteBlock: FC = () => (
5
+ <KolQuote
6
+ _label="RFC 1149"
7
+ _href="https://datatracker.ietf.org/doc/html/rfc1149"
8
+ _quote="Avian carriers can provide high delay, low throughput, and low altitude
9
+ service. The connection topology is limited to a single point-to-point path
10
+ for each carrier, used with standard carriers, but many carriers can be used
11
+ without significant interference with each other, outside early spring.
12
+ This is because of the 3D ether space available to the carriers, in contrast
13
+ to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
14
+ avoidance system, which increases availability."
15
+ _variant="block"
16
+ ></KolQuote>
17
+ );
package/src/components/quote/routes.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { QuoteBasic } from './basic';
4
+ import { QuoteBlock } from './block';
5
+
6
+ export const QUOTE_ROUTES: Routes = {
7
+ quote: {
8
+ basic: QuoteBasic,
9
+ block: QuoteBlock,
10
+ },
11
+ };
package/src/components/tabs/basic.tsx ADDED
@@ -0,0 +1,30 @@
1
+ import React, { FC } from 'react';
2
+ import { KolTabs } from '@public-ui/react';
3
+
4
+ const tabs = [
5
+ {
6
+ _icon: 'codicon codicon-pie-chart',
7
+ _label: 'Erster Tab',
8
+ },
9
+ {
10
+ _icon: 'codicon codicon-calendar',
11
+ _label: 'Zweites Tab',
12
+ },
13
+ {
14
+ _disabled: true,
15
+ _icon: 'codicon codicon-briefcase',
16
+ _label: 'Deaktiviertes Tab',
17
+ },
18
+ {
19
+ _icon: 'codicon codicon-telescope',
20
+ _label: 'Letzter Tab',
21
+ },
22
+ ];
23
+ export const TabsBasic: FC = () => (
24
+ <KolTabs _tabs={tabs}>
25
+ <div slot="tab-0">Inhalte von Tab 1</div>
26
+ <div slot="tab-1">Inhalte von Tab 2</div>
27
+ <div slot="tab-2">Inhalte von Tab 3</div>
28
+ <div slot="tab-3">Inhalte von Tab 4</div>
29
+ </KolTabs>
30
+ );
package/src/components/tabs/icons-only.tsx ADDED
@@ -0,0 +1,34 @@
1
+ import React, { FC } from 'react';
2
+ import { KolTabs } from '@public-ui/react';
3
+
4
+ const tabs = [
5
+ {
6
+ _icon: 'codicon codicon-pie-chart',
7
+ _label: 'Erster Tab',
8
+ _hideLabel: true,
9
+ },
10
+ {
11
+ _icon: 'codicon codicon-calendar',
12
+ _label: 'Zweites Tab',
13
+ _hideLabel: true,
14
+ },
15
+ {
16
+ _disabled: true,
17
+ _icon: 'codicon codicon-briefcase',
18
+ _label: 'Deaktiviertes Tab',
19
+ _hideLabel: true,
20
+ },
21
+ {
22
+ _icon: 'codicon codicon-telescope',
23
+ _label: 'Letzter Tab',
24
+ _hideLabel: true,
25
+ },
26
+ ];
27
+ export const TabsIconsOnly: FC = () => (
28
+ <KolTabs _tabs={tabs}>
29
+ <div slot="tab-0">Inhalte von Tab 1</div>
30
+ <div slot="tab-1">Inhalte von Tab 2</div>
31
+ <div slot="tab-2">Inhalte von Tab 3</div>
32
+ <div slot="tab-3">Inhalte von Tab 4</div>
33
+ </KolTabs>
34
+ );
package/src/components/tabs/routes.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { Routes } from '../../shares/types';
2
+
3
+ import { TabsBasic } from './basic';
4
+ import { TabsIconsOnly } from './icons-only';
5
+
6
+ export const TABS_ROUTES: Routes = {
7
+ tabs: {
8
+ basic: TabsBasic,
9
+ 'icons-only': TabsIconsOnly,
10
+ },
11
+ };
package/src/components/textarea/counter.tsx ADDED
@@ -0,0 +1,6 @@
1
+ import React, { FC } from 'react';
2
+ import { KolTextarea } from '@public-ui/react';
3
+
4
+ export const TextareaCounter: FC = () => (
5
+ <KolTextarea _hasCounter={true} _label="Textara mit Counter und Hint und Fehler" _error={'oh no'} _hint={'Hinweis'} _touched />
6
+ );
package/src/components/textarea/routes.ts CHANGED
@@ -13,6 +13,7 @@ import { TextareaReadOnly } from './readonly';
13
13
  import { TextareaResize } from './resize';
14
14
 
15
15
  import { TextareaRows } from './rows';
16
+ import { TextareaCounter } from './counter';
16
17
 
17
18
  export const TEXTAREA_ROUTES: Routes = {
18
19
  textarea: {
@@ -23,5 +24,6 @@ export const TEXTAREA_ROUTES: Routes = {
23
24
  readonly: TextareaReadOnly,
24
25
  resize: TextareaResize,
25
26
  rows: TextareaRows,
27
+ 'with-counter': TextareaCounter,
26
28
  },
27
29
  };
package/src/components/toast/basic.tsx CHANGED
@@ -1,6 +1,6 @@
1
- import React from 'react';
2
- import { KolButton, KolToast } from '@public-ui/react';
3
1
  import { ToasterService } from '@public-ui/components';
2
+ import { KolButton } from '@public-ui/react';
3
+ import React from 'react';
4
4
 
5
5
  const toaster = ToasterService.getInstance(document);
6
6
 
package/src/shares/routes.ts CHANGED
@@ -40,6 +40,12 @@ import { TEXTAREA_ROUTES } from '../components/textarea/routes';
40
40
  import { TOAST_ROUTES } from '../components/toast/routes';
41
41
  import { VERSION_ROUTES } from '../components/version/routes';
42
42
  import { Routes } from './types';
43
+ import { IMAGE_ROUTES } from '../components/image/routes';
44
+ import { KOLIBRI_ROUTES } from '../components/kolibri/routes';
45
+ import { LOGO_ROUTES } from '../components/logo/routes';
46
+ import { MODAL_ROUTES } from '../components/modal/routes';
47
+ import { QUOTE_ROUTES } from '../components/quote/routes';
48
+ import { TABS_ROUTES } from '../components/tabs/routes';
43
49
 
44
50
  export const ROUTES: Routes = {
45
51
  ...HANDOUT_ROUTES,
@@ -49,14 +55,15 @@ export const ROUTES: Routes = {
49
55
  ...AVATAR_ROUTES,
50
56
  ...BADGE_ROUTES,
51
57
  ...BREADCRUMB_ROUTES,
52
- ...BUTTON_ROUTES,
53
- ...BUTTON_LINK_ROUTES,
54
58
  ...BUTTON_GROUP_ROUTES,
59
+ ...BUTTON_LINK_ROUTES,
60
+ ...BUTTON_ROUTES,
55
61
  ...CARD_ROUTES,
56
62
  ...DETAILS_ROUTES,
57
63
  ...FORM_ROUTES,
58
64
  ...HEADING_ROUTES,
59
65
  ...ICON_ROUTES,
66
+ ...IMAGE_ROUTES,
60
67
  ...INDENTED_ROUTES,
61
68
  ...INPUT_CHECKBOX_ROUTES,
62
69
  ...INPUT_COLOR_ROUTES,
@@ -68,19 +75,24 @@ export const ROUTES: Routes = {
68
75
  ...INPUT_RADIO_ROUTES,
69
76
  ...INPUT_RANGE_ROUTES,
70
77
  ...INPUT_TEXT_ROUTES,
71
- ...LINK_ROUTES,
78
+ ...KOLIBRI_ROUTES,
72
79
  ...LINK_BUTTON_ROUTES,
73
80
  ...LINK_GROUP_ROUTES,
81
+ ...LINK_ROUTES,
82
+ ...LOGO_ROUTES,
83
+ ...MODAL_ROUTES,
74
84
  ...NAV_ROUTES,
75
85
  ...PAGINATION_ROUTES,
76
86
  ...POPOVER_ROUTES,
77
87
  ...PROGRESS_ROUTES,
88
+ ...QUOTE_ROUTES,
78
89
  ...SELECT_ROUTES,
79
90
  ...SELECT_ROUTES,
80
91
  ...SKIP_NAV_ROUTES,
81
92
  ...SPIN_ROUTES,
82
93
  ...SPLIT_BUTTON_ROUTES,
83
94
  ...TABLE_ROUTES,
95
+ ...TABS_ROUTES,
84
96
  ...TEXTAREA_ROUTES,
85
97
  ...TOAST_ROUTES,
86
98
  ...VERSION_ROUTES,
package/tsconfig.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "preserveSymlinks": true,
10
10
  "moduleResolution": "node",
11
11
  "lib": ["es2017", "dom"],
12
- "types": ["@public-ui/components", "mocha", "node", "react", "react-dom"],
12
+ "types": ["node", "react", "react-dom"],
13
13
  "typeRoots": ["node_modules/@types", "src/types"],
14
14
  "noUnusedLocals": true,
15
15
  "resolveJsonModule": true,
@@ -27,6 +27,5 @@
27
27
  "jsxFactory": "React.createElement",
28
28
  "jsxFragmentFactory": "React.Fragment"
29
29
  },
30
- "include": ["src/**/*", "tests/**/*", "node_modules/@leanup/**/*", "decs.d.ts"],
31
- "exclude": ["node_modules/@leanup/**/template/**/*"]
30
+ "include": ["src/**/*"]
32
31
  }
package/test-build.sh DELETED
@@ -1,2 +0,0 @@
1
- cd "$(dirname "$0")"
2
- npm run build -- --output-path=$1