@oliasoft-open-source/react-ui-library 4.12.0-beta-1 → 4.12.0-beta-3
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.
- package/dist/assets/{index-BVCFmQTa.js → index-BMWyiwz3.js} +169 -145
- package/dist/assets/{index-BU9wzZv9.css → index-BaYhOc6M.css} +37 -5
- package/dist/global.css +643 -643
- package/dist/index.html +1 -1
- package/dist/index.js +347 -369
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/{Color-KGDBMAHA-CK3d59Om.js → Color-KGDBMAHA-BU5Cvr93.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-PKQXORMH-C_QE44cn.js → DocsRenderer-PKQXORMH-giM41WN8.js} +1 -1
- package/dist/storybook/assets/{accordion.stories-C3VY77Jy.js → accordion.stories-BlHfHegj.js} +1 -1
- package/dist/storybook/assets/{buttons-and-links-FQEbqz9H.js → buttons-and-links-BA3MNFjq.js} +1 -1
- package/dist/storybook/assets/{casing-loads.stories-B7JIoJVk.js → casing-loads.stories-Cl2tJipP.js} +1 -1
- package/dist/storybook/assets/{cell.stories-xZiHEc0P.js → cell.stories-rzJE_qJC.js} +1 -1
- package/dist/storybook/assets/{chunk-HLWAVYOI-EhWEisNT.js → chunk-HLWAVYOI-Dvbg03uT.js} +1 -1
- package/dist/storybook/assets/{color-B3dajHjs.js → color-DIyQ13kP.js} +1 -1
- package/dist/storybook/assets/{footer.stories-BxzKeFAK.js → footer.stories-C6M5S0UZ.js} +1 -1
- package/dist/storybook/assets/{formation.stories-C5Hkb3iK.js → formation.stories-1WX1Nu1P.js} +1 -1
- package/dist/storybook/assets/{iframe-DOUoMheZ.js → iframe-B0e2q2Zd.js} +2 -2
- package/dist/storybook/assets/{index-KVAIZqzA.js → index-BXJ79Lvz.js} +1 -1
- package/dist/storybook/assets/{index-AKsHS-dO.js → index-BlyDuQBv.js} +4 -4
- package/dist/storybook/assets/{initialize-context-rEvM6bdZ.js → initialize-context-Y03pJPr5.js} +1 -1
- package/dist/storybook/assets/{input-validation-BNoUk3q6.js → input-validation-CLZKtfoW.js} +1 -1
- package/dist/storybook/assets/{inputs-Dql6Fq32.js → inputs-DlW6Jeem.js} +1 -1
- package/dist/storybook/assets/{layout-forms-DuFo_rwV.js → layout-forms-C6ZH-nYk.js} +1 -1
- package/dist/storybook/assets/{layout-general-C-UddRr1.js → layout-general-CWqOMwXA.js} +1 -1
- package/dist/storybook/assets/menu.test-case.stories-XN9XFV-D.js +3 -0
- package/dist/storybook/assets/{modal.test-case.stories-H8AYyvAl.js → modal.test-case.stories-Ci1WRYdo.js} +2 -2
- package/dist/storybook/assets/{number-input-CNnU6gOF.js → number-input-B3_gmeWr.js} +1 -1
- package/dist/storybook/assets/{number-input.stories-Bo26PJmJ.js → number-input.stories-epjUq9ve.js} +1 -1
- package/dist/storybook/assets/number-input.test-case.stories-DeEtalIU.js +95 -0
- package/dist/storybook/assets/{padding-and-spacing-B9ObVTUS.js → padding-and-spacing-CfnXk0Zn.js} +1 -1
- package/dist/storybook/assets/{preview-_21fnvwa.js → preview-b9pkIJl_.js} +2 -2
- package/dist/storybook/assets/{preview-dBqj-M8_.js → preview-jWpKVqju.js} +1 -1
- package/dist/storybook/assets/{row.stories-BrPMTnKK.js → row.stories-DRvH8Grn.js} +1 -1
- package/dist/storybook/assets/select.test-case.stories-CrXzt4qn.js +82 -0
- package/dist/storybook/assets/{table-iVsvoMpy.js → table-DoyDBG6l.js} +1 -1
- package/dist/storybook/assets/{table.stories-DmGMjcFw.js → table.stories-BgWKzIob.js} +1 -1
- package/dist/storybook/assets/{title.stories-D2LDNgbT.js → title.stories-Rv6ZO_Wl.js} +1 -1
- package/dist/storybook/assets/toaster.test-case.stories-Cy3_Gvs_.js +6 -0
- package/dist/storybook/assets/{unit-input-Byipu-z0.js → unit-input-BXg4VphV.js} +1 -1
- package/dist/storybook/assets/{unit-input.stories-CChVbxmI.js → unit-input.stories-Btz2M_TP.js} +1 -1
- package/dist/storybook/assets/{unit-input.test-case.stories-BwKiucyc.js → unit-input.test-case.stories-CZD1jf36.js} +1 -1
- package/dist/storybook/assets/{unit-table.stories-B7rN0MF0.js → unit-table.stories-CISvZMxX.js} +1 -1
- package/dist/storybook/assets/{unit-table.test-case.stories-BIMbgiTz.js → unit-table.test-case.stories-tEype9om.js} +1 -1
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/package.json +1 -1
- package/dist/storybook/assets/menu.test-case.stories-BFYhvtSH.js +0 -3
- package/dist/storybook/assets/number-input.test-case.stories-BBKpBWfA.js +0 -92
- package/dist/storybook/assets/select.test-case.stories-B6On-PjA.js +0 -82
- package/dist/storybook/assets/toaster.test-case.stories-BhWnh4Cd.js +0 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"generatedAt":
|
|
1
|
+
{"generatedAt":1725450186420,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.12","@vitest/coverage-c8":"0.31.4","eslint-plugin-vitest":null,"eslint-plugin-vitest-globals":"1.5.0","vitest":"1.6.0"},"packageManager":{"type":"yarn","version":"1.22.19"},"typescriptOptions":{"reactDocgen":"react-docgen"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","storybookVersion":"8.2.8","storybookVersionSpecifier":"^8.2.4","language":"typescript","storybookPackages":{"@storybook/addon-essentials":{"version":"8.2.8"},"@storybook/addon-links":{"version":"8.2.8"},"@storybook/preview-api":{"version":"8.2.8"},"@storybook/react":{"version":"8.2.8"},"@storybook/react-vite":{"version":"8.2.8"},"@storybook/test":{"version":"8.2.8"},"@storybook/test-runner":{"version":"0.19.1"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"8.2.8"}},"addons":{"@storybook/addon-actions":{"version":"8.2.8"},"@storybook/addon-docs":{"version":"8.2.8"},"@storybook/addon-interactions":{"version":"8.2.8"},"storybook-dark-mode":{"version":"4.0.2"}}}
|
package/package.json
CHANGED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import{j as d}from"./jsx-runtime-eps93zm2.js";import{w as u,e as a,u as n}from"./index-DMAnyMX5.js";import{M as l}from"./actions-Bax0KeqM.js";import{m as g}from"./menu.stories-data-CQ59XhzU.js";import"./index-DhsZuJvc.js";import"./index-CF7H4eMJ.js";import"./index-Bk2sglWO.js";import"./lodash-c4VUpsOs.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./types-BmbYqTX_.js";import"./types-Dx2TtIG9.js";import"./badge-CLQ59MDF.js";import"./flex-EllkLxgO.js";const A={title:"Basic/Menu/Test Cases",component:l,args:{menu:g},tags:["!autodocs"]},y=s=>d.jsx(l,{...s}),e=y.bind({});e.args={testId:"testId"};e.play=async({canvasElement:s,step:i})=>{const t=s.parentElement?u(s.parentElement):null;await a(t).toBeTruthy(),t&&(await i("Clicking trigger should open menu",async()=>{const r=t.getByTestId("testId");await n.click(r);const o=t.getByTestId("testId-layer");await a(o).toBeInTheDocument()}),await i("Clicking disabled item should do nothing",async()=>{await t.getByText("Knight").click();const o=t.getByTestId("testId-layer");await a(o).toBeInTheDocument()}),await i("Clicking item should close menu",async()=>{const r=t.getByText("King");await n.click(r);const o=t.queryByTestId("testId-layer");await a(o).not.toBeInTheDocument()}))};var m,c,p;e.parameters={...e.parameters,docs:{...(m=e.parameters)==null?void 0:m.docs,source:{originalSource:`args => <Menu
|
|
2
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
3
|
-
{...args} />`,...(p=(c=e.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};const F=["Test"];export{e as Test,F as __namedExportsOrder,A as default};
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJvc.js";import{w as c,u as n,e as o,f as B,a as C}from"./index-DMAnyMX5.js";import{S as x}from"./spacer-BWoNR27H.js";import{G as K}from"./grid-DRkC-bt8.js";import{C as m}from"./card-EcjmryU9.js";import{B as Q}from"./button-Cbv7WK6k.js";import{H as p}from"./heading-CRNoBc7q.js";import{I as ee}from"./input-group-addon-D68iUKV2.js";import{S as te}from"./select-Cwks-WA0.js";import{I as ae}from"./input-group-BaRSJAEN.js";import{F as V}from"./field-HrLaMLbx.js";import{T as R}from"./toggle-BbFVf61v.js";import{T as ne}from"./text-B3-TSWok.js";import{M as se}from"./message-BRyKdRaX.js";import{I as X}from"./icon-BSFY3vDO.js";import{N as u}from"./number-input-CNnU6gOF.js";import"./index-CF7H4eMJ.js";import"./styled-components.browser.esm-BQ9GQzDc.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./spinner-AWUe4xwQ.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./help-icon-Buhx5nl6.js";import"./lodash-c4VUpsOs.js";import"./types-Dx2TtIG9.js";import"./enum-Bnn40S8Q.js";import"./index-CEuq6vkz.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./actions-Bax0KeqM.js";import"./badge-CLQ59MDF.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";import"./label-CqmyC9he.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./index-C0x1JmaP.js";import"./index-DRSy5Ssd.js";import"./input-Db9WkmPP.js";const Ke={title:"Forms/NumberInput/Test Cases",component:u,parameters:{canvas:{page:null}},args:{label:"Label"},tags:["!autodocs"]},v=()=>a.jsxs(ae,{small:!0,children:[a.jsx(u,{value:123}),a.jsx(ee,{children:"to"}),a.jsx(u,{value:123}),a.jsx(te,{options:[{value:"units",label:"units"}],width:"auto",value:"units"})]}),g=()=>{const[r,s]=l.useState("123|m");return a.jsx(u,{name:"example",onChange:t=>s(t.target.value),placeholder:"Type a value...",value:r,testId:"testId"})};g.play=async({canvasElement:r,step:s})=>{const t=c(r),i=c(r.ownerDocument.body);await s("Shows validation error for non-numeric input",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123x45s6"),await o(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await B.mouseOver(e),await o(e.getAttribute("data-error")).toEqual("Must be a numerical value"),await C(()=>{o(i.getByText("Must be a numerical value")).toBeInTheDocument()})})};const y=()=>{const[r,s]=l.useState("123");return a.jsx(u,{value:r,onChange:t=>{s(t.target.value)},testId:"testId",enableDisplayRounding:!0})};y.play=async({canvasElement:r,step:s})=>{const t=c(r);await s("Value should be rounded on blur",async()=>{const i=t.getByTestId("testId");await n.clear(i),await n.type(i,"123.123456789"),await n.click(r),await o(t.getByDisplayValue("123.12")).toBeInTheDocument()}),await s("Full value shown on focus",async()=>{const i=t.getByTestId("testId");await n.click(i),await o(t.getByDisplayValue("123.123456789")).toBeInTheDocument()})};const w=()=>{const[r,s]=l.useState(!0),t=()=>{s(!1),setTimeout(()=>s(!0),0)},[i,e]=l.useState("123");return a.jsxs(K,{columns:"1fr 1fr",gap:!0,children:[a.jsxs(m,{heading:a.jsx(p,{children:"Storage State (Redux)"}),children:[i,a.jsx(x,{}),a.jsx(Q,{label:"Change value",onClick:()=>e(String(Math.floor(Math.random()*100)))})]}),a.jsx(m,{heading:a.jsx(p,{icon:a.jsx(X,{icon:"refresh"}),onIconClick:t,children:"NumberInput"}),children:r&&a.jsx(u,{value:i,onChange:h=>{e(h.target.value)},error:Number(i)>=0?"":"Value must be positive"})})]})},I=()=>{const[r,s]=l.useState(!0),t=()=>{s(!1),setTimeout(()=>s(!0),0)},[i,e]=l.useState(!1),[h,Y]=l.useState(!0),[f,D]=l.useState("0.6889763779527558"),[S,Z]=l.useState(""),$=Number(f)*.3048;return a.jsxs(K,{columns:"1fr 1fr",gap:!0,children:[a.jsxs(m,{heading:a.jsx(p,{children:"Settings"}),children:[a.jsx(V,{label:"Enable display rounding:",labelLeft:!0,labelWidth:200,children:a.jsx(R,{checked:i,onChange:d=>e(d.target.checked)})}),a.jsx(V,{label:"Enable cosmetic rounding:",labelLeft:!0,labelWidth:200,children:a.jsx(R,{checked:h,onChange:d=>Y(d.target.checked)})})]}),a.jsxs(m,{heading:a.jsx(p,{icon:a.jsx(X,{icon:"refresh",testId:"triggerRerenderTestId"}),onIconClick:t,children:"NumberInput (displayed in Meters)"}),children:[a.jsx(ne,{faint:!0,children:"Cosmetic Rounding Test Cases: type 0.21 then return (compare with enableCosmeticRounding on and off)"}),a.jsx(x,{}),r&&a.jsx(u,{name:"Example",value:$,onChange:d=>{const T=String(Number(d.target.value)/.3048);D(T)},enableDisplayRounding:i,enableCosmeticRounding:h,error:Number(f)>=0?"":"Value must be positive",validationCallback:(d,T)=>{Z(T??"")},testId:"testId"})]}),a.jsxs(m,{heading:a.jsx(p,{children:"Storage State / Redux (stored in Feet)"}),children:[f,a.jsx(x,{}),a.jsx(Q,{label:"Change value",onClick:()=>D(String(Math.floor(Math.random()*100)))})]}),a.jsx(m,{heading:a.jsx(p,{children:"Test Validation Callback"}),children:S&&a.jsx(se,{message:{content:S,icon:!0,type:"Error",visible:!0}})})]})};I.play=async({canvasElement:r,step:s})=>{const t=c(r),i=c(r.ownerDocument.body);await s("Can enter decimal values",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123.123456789"),await n.click(r),await o(t.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await s("Can enter scientific notation when storage unit is different",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"-1.12e-3"),await o(t.getByDisplayValue("-1.12e-3")).toBeInTheDocument(),await t.getByTestId("triggerRerenderTestId").click(),await C(()=>{o(t.getByDisplayValue(-.00112)).toBeInTheDocument()})}),await s("Can enter comma decimals (converts to dot)",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123,456"),await o(t.getByDisplayValue("123.456")).toBeInTheDocument()}),await s("Can enter small numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"0.0000000023"),await o(t.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await s("Can enter large numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"999999999999"),await o(t.getByDisplayValue("999999999999")).toBeInTheDocument()}),await s("Shows validation error for non-numeric input",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123x45s6"),await n.click(r),await o(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await o(e.getAttribute("data-error")).toEqual("Must be a numerical value"),await B.mouseOver(e),await C(()=>{o(i.getAllByText("Must be a numerical value").length).toEqual(2)})})};const b=()=>{const[r,s]=l.useState("123");return a.jsx(u,{value:r,onChange:t=>{s(t.target.value)},testId:"testId"})};b.play=async({canvasElement:r,step:s})=>{const t=c(r),i=c(r.ownerDocument.body);await s("Can enter decimal values",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123.123456789"),await o(t.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await s("Can enter scientific notation",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"-1.12e3"),await o(t.getByDisplayValue("-1.12e3")).toBeInTheDocument()}),await s("Can enter comma decimals (converts to dot)",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123,456"),await o(t.getByDisplayValue("123.456")).toBeInTheDocument()}),await s("Can enter small numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"0.0000000023"),await o(t.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await s("Can enter large numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"999999999999"),await o(t.getByDisplayValue("999999999999")).toBeInTheDocument()}),await s("Shows validation error for non-numeric input",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123x45s6"),await o(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await o(e.getAttribute("data-error")).toEqual("Must be a numerical value"),await B.mouseOver(e),await C(()=>{o(i.getByText("Must be a numerical value")).toBeInTheDocument()})})};v.__docgenInfo={description:"",methods:[],displayName:"TestInputGroup"};g.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"Placeholder"};y.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestDisplayRounding"};w.__docgenInfo={description:"",methods:[],displayName:"ManagedTestCase"};I.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"DemoCosmeticRounding"};b.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestUserInput"};var j,k,E;v.parameters={...v.parameters,docs:{...(j=v.parameters)==null?void 0:j.docs,source:{originalSource:`() => <InputGroup small>
|
|
2
|
-
<NumberInput value={123} />
|
|
3
|
-
<InputGroupAddon>to</InputGroupAddon>
|
|
4
|
-
<NumberInput value={123} />
|
|
5
|
-
<Select options={[{
|
|
6
|
-
value: 'units',
|
|
7
|
-
label: 'units'
|
|
8
|
-
}]} width="auto" value="units" />
|
|
9
|
-
</InputGroup>`,...(E=(k=v.parameters)==null?void 0:k.docs)==null?void 0:E.source}}};var N,M,F;g.parameters={...g.parameters,docs:{...(N=g.parameters)==null?void 0:N.docs,source:{originalSource:`() => {
|
|
10
|
-
const [value, setValue] = useState('123|m');
|
|
11
|
-
return <NumberInput name="example" onChange={evt => setValue(evt.target.value)} placeholder="Type a value..." value={value} testId="testId" />;
|
|
12
|
-
}`,...(F=(M=g.parameters)==null?void 0:M.docs)==null?void 0:F.source}}};var _,G,H;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
|
|
13
|
-
const [value, setValue] = useState('123');
|
|
14
|
-
return <NumberInput value={value} onChange={evt => {
|
|
15
|
-
setValue(evt.target.value);
|
|
16
|
-
}} testId="testId" enableDisplayRounding />;
|
|
17
|
-
}`,...(H=(G=y.parameters)==null?void 0:G.docs)==null?void 0:H.source}}};var A,L,q;w.parameters={...w.parameters,docs:{...(A=w.parameters)==null?void 0:A.docs,source:{originalSource:`() => {
|
|
18
|
-
const [visible, setVisible] = useState(true);
|
|
19
|
-
const triggerRerender = () => {
|
|
20
|
-
setVisible(false);
|
|
21
|
-
setTimeout(() => setVisible(true), 0);
|
|
22
|
-
};
|
|
23
|
-
const [value, setValue] = useState('123');
|
|
24
|
-
return <Grid columns="1fr 1fr" gap>
|
|
25
|
-
<Card heading={<Heading>Storage State (Redux)</Heading>}>
|
|
26
|
-
{value}
|
|
27
|
-
<Spacer />
|
|
28
|
-
<Button label="Change value" onClick={() => setValue(String(Math.floor(Math.random() * 100)))} />
|
|
29
|
-
</Card>
|
|
30
|
-
<Card heading={<Heading icon={<Icon icon="refresh" />} onIconClick={triggerRerender}>
|
|
31
|
-
NumberInput
|
|
32
|
-
</Heading>}>
|
|
33
|
-
{visible && <NumberInput value={value} onChange={evt => {
|
|
34
|
-
setValue(evt.target.value);
|
|
35
|
-
}} error={Number(value) >= 0 ? '' : 'Value must be positive'} />}
|
|
36
|
-
</Card>
|
|
37
|
-
</Grid>;
|
|
38
|
-
}`,...(q=(L=w.parameters)==null?void 0:L.docs)==null?void 0:q.source}}};var O,W,P;I.parameters={...I.parameters,docs:{...(O=I.parameters)==null?void 0:O.docs,source:{originalSource:`() => {
|
|
39
|
-
const [visible, setVisible] = useState(true);
|
|
40
|
-
const triggerRerender = () => {
|
|
41
|
-
setVisible(false);
|
|
42
|
-
setTimeout(() => setVisible(true), 0);
|
|
43
|
-
};
|
|
44
|
-
const [enableDisplayRounding, setEnableDisplayRounding] = useState(false);
|
|
45
|
-
const [enableCosmeticRounding, setEnableCosmeticRounding] = useState(true);
|
|
46
|
-
const [valueInFeet, setValueInFeet] = useState('0.6889763779527558');
|
|
47
|
-
const [callBackError, setCallBackError] = useState('');
|
|
48
|
-
const valueInMeters = Number(valueInFeet) * 0.3048;
|
|
49
|
-
return <Grid columns="1fr 1fr" gap>
|
|
50
|
-
<Card heading={<Heading>Settings</Heading>}>
|
|
51
|
-
<Field label="Enable display rounding:" labelLeft labelWidth={200}>
|
|
52
|
-
<Toggle checked={enableDisplayRounding} onChange={evt => setEnableDisplayRounding(evt.target.checked)} />
|
|
53
|
-
</Field>
|
|
54
|
-
<Field label="Enable cosmetic rounding:" labelLeft labelWidth={200}>
|
|
55
|
-
<Toggle checked={enableCosmeticRounding} onChange={evt => setEnableCosmeticRounding(evt.target.checked)} />
|
|
56
|
-
</Field>
|
|
57
|
-
</Card>
|
|
58
|
-
<Card heading={<Heading icon={<Icon icon="refresh" testId="triggerRerenderTestId" />} onIconClick={triggerRerender}>
|
|
59
|
-
NumberInput (displayed in Meters)
|
|
60
|
-
</Heading>}>
|
|
61
|
-
<Text faint>
|
|
62
|
-
Cosmetic Rounding Test Cases: type 0.21 then return (compare with
|
|
63
|
-
enableCosmeticRounding on and off)
|
|
64
|
-
</Text>
|
|
65
|
-
<Spacer />
|
|
66
|
-
{visible && <NumberInput name="Example" value={valueInMeters} onChange={evt => {
|
|
67
|
-
const nextValueInFeet = String(Number(evt.target.value) / 0.3048);
|
|
68
|
-
setValueInFeet(nextValueInFeet); // convert back to ft
|
|
69
|
-
}} enableDisplayRounding={enableDisplayRounding} enableCosmeticRounding={enableCosmeticRounding} error={Number(valueInFeet) >= 0 ? '' : 'Value must be positive'} validationCallback={(name, error) => {
|
|
70
|
-
setCallBackError(error ?? '');
|
|
71
|
-
}} testId="testId" />}
|
|
72
|
-
</Card>
|
|
73
|
-
<Card heading={<Heading>Storage State / Redux (stored in Feet)</Heading>}>
|
|
74
|
-
{valueInFeet}
|
|
75
|
-
<Spacer />
|
|
76
|
-
<Button label="Change value" onClick={() => setValueInFeet(String(Math.floor(Math.random() * 100)))} />
|
|
77
|
-
</Card>
|
|
78
|
-
<Card heading={<Heading>Test Validation Callback</Heading>}>
|
|
79
|
-
{callBackError && <Message message={{
|
|
80
|
-
content: callBackError,
|
|
81
|
-
icon: true,
|
|
82
|
-
type: 'Error',
|
|
83
|
-
visible: true
|
|
84
|
-
}} />}
|
|
85
|
-
</Card>
|
|
86
|
-
</Grid>;
|
|
87
|
-
}`,...(P=(W=I.parameters)==null?void 0:W.docs)==null?void 0:P.source}}};var U,z,J;b.parameters={...b.parameters,docs:{...(U=b.parameters)==null?void 0:U.docs,source:{originalSource:`() => {
|
|
88
|
-
const [value, setValue] = useState('123');
|
|
89
|
-
return <NumberInput value={value} onChange={evt => {
|
|
90
|
-
setValue(evt.target.value);
|
|
91
|
-
}} testId="testId" />;
|
|
92
|
-
}`,...(J=(z=b.parameters)==null?void 0:z.docs)==null?void 0:J.source}}};const Qe=["TestInputGroup","Placeholder","TestDisplayRounding","ManagedTestCase","DemoCosmeticRounding","TestUserInput"];export{I as DemoCosmeticRounding,w as ManagedTestCase,g as Placeholder,y as TestDisplayRounding,v as TestInputGroup,b as TestUserInput,Qe as __namedExportsOrder,Ke as default};
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import{j as _}from"./jsx-runtime-eps93zm2.js";import{r as I}from"./index-DhsZuJvc.js";import{w as r,e as s,u as l}from"./index-DMAnyMX5.js";import{S as T}from"./select-Cwks-WA0.js";import{o as O}from"./select.stories-data-DxgWKlU6.js";import"./index-CF7H4eMJ.js";import"./lodash-c4VUpsOs.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./enum-Bnn40S8Q.js";import"./index-CEuq6vkz.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./text-B3-TSWok.js";import"./actions-Bax0KeqM.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./badge-CLQ59MDF.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";const ue={title:"Forms/Select/Test Cases",component:T,args:{options:O},tags:["!autodocs"]},v=n=>{const{multi:o,value:e}=n,[a,t]=I.useState(e||(o?[]:void 0)),i=c=>{const{value:g}=c.target;t(o?g:{value:g})};return _.jsx(T,{value:a,onChange:i,...n})},y=v.bind({});y.args={value:{label:"Vampires",value:"blood"},disabled:!0};const d=v.bind({});d.args={testId:"testId",clearable:!0};d.play=async({canvasElement:n,step:o})=>{const e=n.parentElement?r(n.parentElement):null;await s(e).toBeTruthy(),e&&(await o("Select item with click",async()=>{const a=e.getByTestId("testId");await l.click(a);const t=e.getByTestId("testId-layer");await s(t).toBeInTheDocument();const i=r(t).getByText("Wombats");await l.click(i);const c=e.getByTestId("testId-value");await s(r(c).getByText("Wombats")).toBeInTheDocument()}),await o("Clear selected value",async()=>{const a=e.getByTestId("testId-clear");await l.click(a);const t=e.queryByTestId("testId-value");await s(t).not.toBeInTheDocument()}))};const m=v.bind({});m.args={testId:"testId",clearable:!0,multi:!0};m.play=async({canvasElement:n,step:o})=>{const e=n.parentElement?r(n.parentElement):null;await s(e).toBeTruthy(),e&&(await o("Select items with click",async()=>{const a=e.getByTestId("testId");await l.click(a);const t=e.getByTestId("testId-layer");await s(t).toBeInTheDocument();const i=r(t).getByText("Wombats");await l.click(i);const c=r(t).getByText("Kangaroos");await l.click(c),await l.click(n),await s(t).not.toBeInTheDocument();const g=e.getByTestId("testId-value");await s(r(g).getByText("Wombats")).toBeInTheDocument(),await s(r(g).getByText("Kangaroos")).toBeInTheDocument()}),await o("Deselect item with click",async()=>{const a=e.getByTestId("testId");await l.click(a);const t=e.getByTestId("testId-layer");await s(t).toBeInTheDocument();const i=r(t).getByText("Wombats");await l.click(i),await l.click(n),await s(t).not.toBeInTheDocument();const c=e.getByTestId("testId-value");await s(r(c).queryByText("Wombats")).not.toBeInTheDocument()}),await o("Clear selected values",async()=>{const a=e.getByTestId("testId-clear");await l.click(a);const t=e.queryByTestId("testId-value");await s(t).not.toBeInTheDocument()}))};const p=v.bind({});p.args={testId:"testId",disabled:!0};p.play=async({canvasElement:n,step:o})=>{const e=r(n);await o("Clicking disabled trigger should not show layer",async()=>{await e.getByTestId("testId").click();const t=e.queryByTestId("testId-layer");await s(t).toBeNull()})};const u=()=>{const[n,o]=I.useState(O),[e,a]=I.useState(void 0);return _.jsx(T,{testId:"testId",name:"example",options:n,onChange:t=>a({value:t.target.value}),onCreate:t=>{const i={label:t,value:t};o([...n,i]),a(i)},value:e})};u.args={testId:"testId"};u.play=async({canvasElement:n,step:o})=>{const e=n.parentElement?r(n.parentElement):null;await s(e).toBeTruthy(),e&&await o("Create new item",async()=>{const a=e.getByTestId("testId-input");if(s(a).toBeInTheDocument(),!a)return;await l.type(a,"New value");const t=e.getByText('Create "New value"');await l.click(t);const i=e.getByTestId("testId-value");await s(r(i).getByText("New value")).toBeInTheDocument()})};u.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestCreate"};var w,h,B;y.parameters={...y.parameters,docs:{...(w=y.parameters)==null?void 0:w.docs,source:{originalSource:`(args: any) => {
|
|
2
|
-
const {
|
|
3
|
-
multi,
|
|
4
|
-
value
|
|
5
|
-
} = args;
|
|
6
|
-
const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
|
|
7
|
-
const handleChange = (evt: any) => {
|
|
8
|
-
const {
|
|
9
|
-
value
|
|
10
|
-
} = evt.target;
|
|
11
|
-
setSelectedValue(multi ? value : {
|
|
12
|
-
value
|
|
13
|
-
});
|
|
14
|
-
};
|
|
15
|
-
return <Select value={selectedValue} onChange={handleChange}
|
|
16
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
17
|
-
{...args} />;
|
|
18
|
-
}`,...(B=(h=y.parameters)==null?void 0:h.docs)==null?void 0:B.source}}};var S,V,x;d.parameters={...d.parameters,docs:{...(S=d.parameters)==null?void 0:S.docs,source:{originalSource:`(args: any) => {
|
|
19
|
-
const {
|
|
20
|
-
multi,
|
|
21
|
-
value
|
|
22
|
-
} = args;
|
|
23
|
-
const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
|
|
24
|
-
const handleChange = (evt: any) => {
|
|
25
|
-
const {
|
|
26
|
-
value
|
|
27
|
-
} = evt.target;
|
|
28
|
-
setSelectedValue(multi ? value : {
|
|
29
|
-
value
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
return <Select value={selectedValue} onChange={handleChange}
|
|
33
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
34
|
-
{...args} />;
|
|
35
|
-
}`,...(x=(V=d.parameters)==null?void 0:V.docs)==null?void 0:x.source}}};var b,C,f;m.parameters={...m.parameters,docs:{...(b=m.parameters)==null?void 0:b.docs,source:{originalSource:`(args: any) => {
|
|
36
|
-
const {
|
|
37
|
-
multi,
|
|
38
|
-
value
|
|
39
|
-
} = args;
|
|
40
|
-
const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
|
|
41
|
-
const handleChange = (evt: any) => {
|
|
42
|
-
const {
|
|
43
|
-
value
|
|
44
|
-
} = evt.target;
|
|
45
|
-
setSelectedValue(multi ? value : {
|
|
46
|
-
value
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
return <Select value={selectedValue} onChange={handleChange}
|
|
50
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
51
|
-
{...args} />;
|
|
52
|
-
}`,...(f=(C=m.parameters)==null?void 0:C.docs)==null?void 0:f.source}}};var D,k,j;p.parameters={...p.parameters,docs:{...(D=p.parameters)==null?void 0:D.docs,source:{originalSource:`(args: any) => {
|
|
53
|
-
const {
|
|
54
|
-
multi,
|
|
55
|
-
value
|
|
56
|
-
} = args;
|
|
57
|
-
const [selectedValue, setSelectedValue] = useState(value || (multi ? [] : undefined));
|
|
58
|
-
const handleChange = (evt: any) => {
|
|
59
|
-
const {
|
|
60
|
-
value
|
|
61
|
-
} = evt.target;
|
|
62
|
-
setSelectedValue(multi ? value : {
|
|
63
|
-
value
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
return <Select value={selectedValue} onChange={handleChange}
|
|
67
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
68
|
-
{...args} />;
|
|
69
|
-
}`,...(j=(k=p.parameters)==null?void 0:k.docs)==null?void 0:j.source}}};var E,N,W;u.parameters={...u.parameters,docs:{...(E=u.parameters)==null?void 0:E.docs,source:{originalSource:`() => {
|
|
70
|
-
const [options, setOptions] = useState(storyData.options);
|
|
71
|
-
const [singleValue, setSingleValue] = useState<ISelectSelectedOption | undefined>(undefined);
|
|
72
|
-
return <Select testId="testId" name="example" options={options} onChange={evt => setSingleValue({
|
|
73
|
-
value: evt.target.value
|
|
74
|
-
})} onCreate={value => {
|
|
75
|
-
const newValue = {
|
|
76
|
-
label: value,
|
|
77
|
-
value
|
|
78
|
-
};
|
|
79
|
-
setOptions([...options, newValue]);
|
|
80
|
-
setSingleValue(newValue);
|
|
81
|
-
}} value={singleValue} />;
|
|
82
|
-
}`,...(W=(N=u.parameters)==null?void 0:N.docs)==null?void 0:W.source}}};const de=["TestDisabledNonExistentValue","Test","TestMulti","TestDisabled","TestCreate"];export{d as Test,u as TestCreate,p as TestDisabled,y as TestDisabledNonExistentValue,m as TestMulti,de as __namedExportsOrder,ue as default};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import{j as u}from"./jsx-runtime-eps93zm2.js";import{w as d,e as a,u as n,a as c}from"./index-DMAnyMX5.js";import{t as g}from"./toaster-O8ftrUAJ.js";import{B as w}from"./button-Cbv7WK6k.js";import{a as y}from"./message-BRyKdRaX.js";import"./index-DhsZuJvc.js";import"./index-CF7H4eMJ.js";import"./toaster-7wnI6hqB.js";import"./index-CUZDtIZe.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./tooltip-1V7clEnw.js";const h={type:y.INFO,icon:!0,heading:"Heading",content:"Long content lorem ipsum dolor est compendum lorem ipsum."},O={title:"Modals/Toaster/Test Cases",parameters:{docs:{story:{inline:!1,iframeHeight:400}}},source:{type:"code"},args:{id:void 0,message:h,autoClose:6e3,onClose:()=>{}},tags:["!autodocs"]},T=r=>u.jsx(w,{onClick:()=>g({...r,onClose:()=>console.log("toast closed")}),label:"Show toast"}),s=T.bind({});s.args={id:"testId",autoClose:50};s.play=async({canvasElement:r,step:i})=>{const t=r.parentElement?d(r.parentElement):null;await a(t).toBeTruthy(),t&&(await i("Toast should appear when triggered",async()=>{const o=t.getByText("Show toast");await n.click(o);const e=t.getByRole("alert");await a(e).toBeInTheDocument()}),await i("Duplicate toasts shouldn't be created",async()=>{const o=t.getByText("Show toast");await n.click(o);const e=t.queryAllByRole("alert");await a(e).toHaveLength(1)}),await i("Toast should disappear when close button pressed",async()=>{const o=t.getByRole("alert"),e=t.getByTestId("testId-dismiss");await n.click(e),await c(()=>a(o).not.toBeInTheDocument(),{timeout:2e3})}),await i("Toast should automatically close",async()=>{const o=t.getByText("Show toast");await n.click(o);const e=t.getByRole("alert");await c(()=>a(e).not.toBeInTheDocument(),{timeout:2e3})}))};var l,m,p;s.parameters={...s.parameters,docs:{...(l=s.parameters)==null?void 0:l.docs,source:{originalSource:`args => {
|
|
2
|
-
return <Button onClick={() => toast({
|
|
3
|
-
...args,
|
|
4
|
-
onClose: () => console.log('toast closed')
|
|
5
|
-
})} label="Show toast" />;
|
|
6
|
-
}`,...(p=(m=s.parameters)==null?void 0:m.docs)==null?void 0:p.source}}};const q=["Test"];export{s as Test,q as __namedExportsOrder,O as default};
|