@public-ui/sample-react 2.0.5 → 2.0.7

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 (75) hide show
  1. package/dist/104.js +1 -1
  2. package/dist/1296.js +1 -1
  3. package/dist/1461.js +1 -1
  4. package/dist/1684.js +1 -1
  5. package/dist/1685.js +1 -1
  6. package/dist/1804.js +2 -0
  7. package/dist/1888.js +1 -1
  8. package/dist/{4443.js → 1892.js} +2 -2
  9. package/dist/2120.js +1 -1
  10. package/dist/2240.js +1 -1
  11. package/dist/2364.js +1 -1
  12. package/dist/2392.js +1 -1
  13. package/dist/2444.js +1 -1
  14. package/dist/2544.js +2 -0
  15. package/dist/2544.js.LICENSE.txt +3 -0
  16. package/dist/2628.js +1 -1
  17. package/dist/2740.js +1 -1
  18. package/dist/2764.js +1 -1
  19. package/dist/2782.js +1 -1
  20. package/dist/2812.js +1 -1
  21. package/dist/3200.js +1 -1
  22. package/dist/3204.js +1 -1
  23. package/dist/352.js +1 -1
  24. package/dist/3564.js +1 -1
  25. package/dist/3920.js +1 -1
  26. package/dist/4064.js +1 -1
  27. package/dist/4136.js +1 -1
  28. package/dist/4544.js +1 -1
  29. package/dist/4728.js +1 -1
  30. package/dist/4915.js +1 -1
  31. package/dist/4988.js +1 -1
  32. package/dist/5376.js +1 -1
  33. package/dist/5456.js +1 -1
  34. package/dist/5615.js +1 -1
  35. package/dist/5628.js +1 -1
  36. package/dist/5744.js +1 -1
  37. package/dist/5768.js +1 -1
  38. package/dist/5839.js +1 -1
  39. package/dist/5956.js +1 -1
  40. package/dist/5972.js +1 -1
  41. package/dist/6040.js +1 -1
  42. package/dist/7192.js +1 -1
  43. package/dist/7312.js +1 -1
  44. package/dist/736.js +1 -1
  45. package/dist/7496.js +1 -1
  46. package/dist/7508.js +1 -1
  47. package/dist/7596.js +1 -1
  48. package/dist/7712.js +1 -1
  49. package/dist/7808.js +1 -1
  50. package/dist/8188.js +1 -1
  51. package/dist/8232.js +1 -1
  52. package/dist/8248.js +1 -1
  53. package/dist/828.js +1 -1
  54. package/dist/8476.js +1 -1
  55. package/dist/8524.js +1 -1
  56. package/dist/9072.js +1 -1
  57. package/dist/9088.js +1 -1
  58. package/dist/9404.js +1 -1
  59. package/dist/9424.js +1 -1
  60. package/dist/9680.js +1 -1
  61. package/dist/9888.js +1 -1
  62. package/dist/9984.js +1 -1
  63. package/dist/index.html +1 -1
  64. package/dist/main.css +1 -1
  65. package/dist/main.js +145 -143
  66. package/dist/main.js.LICENSE.txt +2 -2
  67. package/package.json +12 -13
  68. package/public/index.html +1 -1
  69. package/src/components/input-text/hide-errors.tsx +25 -0
  70. package/src/components/input-text/routes.ts +2 -0
  71. package/src/scenarios/routes.ts +2 -0
  72. package/src/scenarios/static-form.tsx +78 -0
  73. package/dist/6992.js +0 -2
  74. /package/dist/{4443.js.LICENSE.txt → 1804.js.LICENSE.txt} +0 -0
  75. /package/dist/{6992.js.LICENSE.txt → 1892.js.LICENSE.txt} +0 -0
package/dist/main.js.LICENSE.txt CHANGED
@@ -33,7 +33,7 @@
33
33
  */
34
34
 
35
35
  /**
36
- * @remix-run/router v1.15.0
36
+ * @remix-run/router v1.15.1
37
37
  *
38
38
  * Copyright (c) Remix Software Inc.
39
39
  *
@@ -44,7 +44,7 @@
44
44
  */
45
45
 
46
46
  /**
47
- * React Router v6.22.0
47
+ * React Router v6.22.1
48
48
  *
49
49
  * Copyright (c) Remix Software Inc.
50
50
  *
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
1
  {
2
2
  "name": "@public-ui/sample-react",
3
- "version": "2.0.5",
3
+ "version": "2.0.7",
4
4
  "description": "This app contains samples for the KoliBri/Public UI",
5
5
  "license": "EUPL-1.2",
6
6
  "dependencies": {
7
7
  "@leanup/stack": "1.3.49",
8
8
  "@leanup/stack-react": "1.3.49",
9
9
  "@leanup/stack-webpack": "1.3.49",
10
- "@public-ui/components": "2.0.5",
11
- "@public-ui/react": "2.0.5",
12
- "@public-ui/themes": "2.0.5",
13
- "@types/node": "20.11.17",
14
- "@types/react": "18.2.55",
10
+ "@public-ui/components": "2.0.7",
11
+ "@public-ui/react": "2.0.7",
12
+ "@public-ui/themes": "2.0.7",
13
+ "@types/node": "20.11.19",
14
+ "@types/react": "18.2.57",
15
15
  "@types/react-dom": "18.2.19",
16
16
  "@unocss/preset-uno": "0.58.5",
17
17
  "@unocss/webpack": "0.58.5",
18
18
  "ajv": "8.12.0",
19
- "chromedriver": "121.0.0",
19
+ "chromedriver": "121.0.2",
20
20
  "cpy-cli": "5.0.0",
21
21
  "eslint-plugin-jsx-a11y": "6.8.0",
22
22
  "eslint-plugin-react": "7.33.2",
@@ -25,8 +25,8 @@
25
25
  "npm-run-all": "4.1.5",
26
26
  "react": "18.2.0",
27
27
  "react-dom": "18.2.0",
28
- "react-router": "6.22.0",
29
- "react-router-dom": "6.22.0",
28
+ "react-router": "6.22.1",
29
+ "react-router-dom": "6.22.1",
30
30
  "rimraf": "3.0.2",
31
31
  "ts-prune": "0.10.3",
32
32
  "typescript": "5.3.3",
@@ -52,11 +52,10 @@
52
52
  "build:deps": "pnpm --filter @public-ui/sample-react^... build",
53
53
  "format": "prettier --check src",
54
54
  "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
55
+ "prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
56
+ "prepare:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
55
57
  "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
56
58
  "start": "npm run serve -- --open",
57
- "unused": "ts-prune -e src",
58
- "postinstall": "npm-run-all postinstall:*",
59
- "postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
60
- "postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot"
59
+ "unused": "ts-prune -e src"
61
60
  }
62
61
  }
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=false" />
21
+ <meta name="kolibri" content="dev-mode=false;experimental-mode=true;" />
22
22
  </head>
23
23
  <body>
24
24
  <div id="app"></div>
package/src/components/input-text/hide-errors.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { KolAlert, KolCard, KolInputText } from '@public-ui/react';
2
+ import type { FC } from 'react';
3
+ import React from 'react';
4
+ import { SampleDescription } from '../SampleDescription';
5
+
6
+ export const InputTextHideErrors: FC = () => (
7
+ <div className="grid gap-4">
8
+ <SampleDescription>
9
+ This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
10
+ </SampleDescription>
11
+ <KolCard _label="Normal input field with error" _level={0}>
12
+ <KolInputText _error="Error message" _label="Input with error" _touched />
13
+ </KolCard>
14
+ <KolCard _label="Input field with hidden error" _level={0}>
15
+ <fieldset className="grid md:grid-cols-2 gap-4">
16
+ <legend>Combined input field</legend>
17
+ <KolAlert className="col-span-2" _level={0} _type="error">
18
+ This is a combined error message
19
+ </KolAlert>
20
+ <KolInputText _error="This is a combined error message" _hideError _label="First input" _touched />
21
+ <KolInputText _error="This is a combined error message" _hideError _label="Second input with error" _touched />
22
+ </fieldset>
23
+ </KolCard>
24
+ </div>
25
+ );
package/src/components/input-text/routes.ts CHANGED
@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
2
2
  import { InputTextBasic } from './basic';
3
3
  import { InputTextBlur } from './blur';
4
4
  import { InputTextFocus } from './focus';
5
+ import { InputTextHideErrors } from './hide-errors';
5
6
 
6
7
  export const INPUT_TEXT_ROUTES: Routes = {
7
8
  'input-text': {
8
9
  basic: InputTextBasic,
9
10
  blur: InputTextBlur,
10
11
  focus: InputTextFocus,
12
+ 'hide-errors': InputTextHideErrors,
11
13
  },
12
14
  };
package/src/scenarios/routes.ts CHANGED
@@ -3,6 +3,7 @@ import { AppointmentForm } from './appointment-form/AppointmentForm';
3
3
  import { TerminComponent } from './complex-form/component';
4
4
  import { CustomTooltipWidth } from './custom-tooltip-width';
5
5
  import { InputsGetValue } from './inputs-get-value';
6
+ import { StaticForm } from './static-form';
6
7
 
7
8
  export const SCENARIO_ROUTES: Routes = {
8
9
  scenarios: {
@@ -10,5 +11,6 @@ export const SCENARIO_ROUTES: Routes = {
10
11
  'appointment-form': AppointmentForm,
11
12
  'inputs-get-value': InputsGetValue,
12
13
  'custom-tooltip-width': CustomTooltipWidth,
14
+ 'static-form': StaticForm,
13
15
  },
14
16
  };
package/src/scenarios/static-form.tsx ADDED
@@ -0,0 +1,78 @@
1
+ import {
2
+ KolButton,
3
+ KolInputCheckbox,
4
+ KolInputColor,
5
+ KolInputDate,
6
+ KolInputEmail,
7
+ KolInputFile,
8
+ KolInputNumber,
9
+ KolInputPassword,
10
+ KolInputRadio,
11
+ KolInputRange,
12
+ KolInputText,
13
+ KolSelect,
14
+ KolTextarea,
15
+ } from '@public-ui/react';
16
+ import type { FC } from 'react';
17
+ import React from 'react';
18
+ import { SampleDescription } from '../components/SampleDescription';
19
+
20
+ export const StaticForm: FC = () => {
21
+ return (
22
+ <>
23
+ <SampleDescription>
24
+ <p>This sample shows how you can use KoliBri in static form context, too.</p>
25
+ <ol>
26
+ <li>
27
+ First you have to enable the <code>experimental mode</code>:{' '}
28
+ <code className="bg-gray-200">&lt;meta name=&quot;kolibri&quot; content=&quot;dev-mode=false;experimental-mode=true;&quot; /&gt;</code>
29
+ </li>
30
+ <li>
31
+ Currently you have to use a native <code>form</code> element:{' '}
32
+ <code className="bg-gray-200">&lt;form method=&quot;GET&quot;&gt;...&lt;/form&gt;</code>
33
+ </li>
34
+ <li>
35
+ It is important in static usage to give every input a <code>name</code> attribute:{' '}
36
+ <code className="bg-gray-200">&lt;KolInputColor _name=&quot;color&quot; _label=&quot;Color&quot; /&gt;</code>
37
+ </li>
38
+ <li>
39
+ Last of all one button should have the type <code>submit</code>:{' '}
40
+ <code className="bg-gray-200">&lt;KolButton _label=&quot;Submit&quot; _type=&quot;submit&quot; _variant=&quot;primary&quot; /&gt;</code>
41
+ </li>
42
+ </ol>
43
+ </SampleDescription>
44
+ <form className="grid gap-4" method="get">
45
+ <KolInputCheckbox _name="checkbox" _label="Checkbox" />
46
+ <KolInputColor _name="color" _label="Color" />
47
+ <KolInputDate _name="date" _label="Date" />
48
+ <KolInputEmail _name="email" _label="Email" />
49
+ <KolInputFile _name="file" _label="File" />
50
+ <KolInputNumber _name="number" _label="Number" />
51
+ <KolInputPassword _name="password" _label="Password" />
52
+ <KolInputRadio
53
+ _name="radio"
54
+ _label="Radio"
55
+ _options={[
56
+ { label: 'Option A', value: 'A' },
57
+ { label: 'Option B', value: 'B' },
58
+ ]}
59
+ />
60
+ <KolInputRange _name="range" _label="Range" />
61
+ <KolInputText _name="text" _label="Text" />
62
+ <KolSelect
63
+ _name="select"
64
+ _label="Select"
65
+ _options={[
66
+ { label: 'Option A', value: 'A' },
67
+ { label: 'Option B', value: 'B' },
68
+ ]}
69
+ />
70
+ <KolTextarea _name="textarea" _label="Textarea" />
71
+ <div className="flex flex-wrap gap-4">
72
+ <KolButton _label="Submit" _type="submit" _variant="primary" />
73
+ <KolButton _label="Reset" _type="reset" />
74
+ </div>
75
+ </form>
76
+ </>
77
+ );
78
+ };
package/dist/6992.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 6992.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6992],{6992:(e,t,l)=>{l.r(t),l.d(t,{initialize:()=>a});var i=l(7328),r=l(7944);function n(e,t){try{Object.defineProperty((0,r.g)(),e,{get:function(){return t}})}catch(t){r.L.debug(`KoliBri property ${e} is already bind.`)}}const o=(e,t)=>r.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,r.i)(),(0,r.b)()){(0,r.r)(),n("a11yColorContrast",i.aL),n("querySelector",i.al),n("querySelectorAll",i.aM),n("querySelectorColors",i.aN),n("utils",(function(){return i.aK})),n("parseJson",i.k),n("stringifyJson",i.aO);const e=(0,r.d)().body,t=(0,r.d)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n xmlns="http://www.w3.org/2000/svg"\n width="50"\n height="50"\n viewBox="0 0 600 600"\n>\n <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,r.d)().body.appendChild(t),o("Development mode",(0,r.b)()),o("Experimental mode",(0,r.a)()),o("Color contrast analysis",(0,r.e)()),(0,r.e)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{i.aK.queryHtmlElementColors((0,r.d)().createElement("div"),(0,i.aL)(e),!1,!1)}),1e4)}),2500)}}}}}]);