@spscommerce/ds-react 6.6.0 → 6.7.0

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 (4) hide show
  1. package/lib/form/SpsForm.examples.d.ts +1 -59
  2. package/lib/index.cjs.js +348 -815
  3. package/lib/index.es.js +8 -533
  4. package/package.json +11 -11
package/lib/index.es.js CHANGED
@@ -23437,532 +23437,7 @@ function useCustomValidator(validator, validatorConfig = {}, dependencies = [])
23437
23437
  }
23438
23438
  return React.useCallback(validator, dependencies);
23439
23439
  }
23440
- const SpsFormExamples = {
23441
- a_basic: {
23442
- label: "Basic Usage",
23443
- description: "",
23444
- examples: {
23445
- basic: {
23446
- react: code`
23447
- function DemoComponent() {
23448
- const COLOR_OPTIONS = ["red", "blue", "green"];
23449
- const initValue = {
23450
- name: "Foo",
23451
- color: COLOR_OPTIONS[0],
23452
- };
23453
- const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
23454
- "name": value => value.color === COLOR_OPTIONS[0] ? [SpsValidators.required] : []
23455
- });
23456
-
23457
- function handleSubmit() {
23458
- console.log("submit", formValue);
23459
- }
23460
- function reset() {
23461
- updateForm(initValue);
23462
- }
23463
-
23464
- return <>
23465
- <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
23466
- <div className="sfg-row">
23467
- <div className="sfg-col-8">
23468
- <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>
23469
- <SpsTextInput
23470
- value={formValue.name}
23471
- formMeta={formMeta.fields.name}
23472
- />
23473
- </div>
23474
- <div className="sfg-col-4">
23475
- <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
23476
- {COLOR_OPTIONS.map(color =>
23477
- <SpsRadioButton key={color} name={color} value={color} label={color}
23478
- checked={color === formValue.color}
23479
- formMeta={formMeta.fields.color}
23480
- />
23481
- )}
23482
- </div>
23483
- </div>
23484
- <div className="sfg-row">
23485
- <div className="sfg-col-12">
23486
- <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
23487
- <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
23488
- </div>
23489
- </div>
23490
- </SpsForm>
23491
- <br/>
23492
- {JSON.stringify(formValue)}
23493
- </>;
23494
- }
23495
- `
23496
- }
23497
- }
23498
- },
23499
- b_array: {
23500
- label: "Form Array",
23501
- description: "",
23502
- examples: {
23503
- array: {
23504
- react: code`
23505
- function DemoComponent() {
23506
- const initValue = {
23507
- itemList: ["foo"],
23508
- }
23509
- const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
23510
- "itemList.*": [SpsValidators.required],
23511
- })
23512
-
23513
- function handleSubmit() {
23514
- console.log("submit", formValue)
23515
- }
23516
- function reset() {
23517
- updateForm(initValue)
23518
- }
23519
-
23520
- function addItem() {
23521
- updateForm({
23522
- ...formValue,
23523
- itemList: [...formValue.itemList, ""],
23524
- })
23525
- }
23526
- function removeItem(index) {
23527
- updateForm({
23528
- ...formValue,
23529
- itemList: formValue.itemList.filter((_, i) => index !== i),
23530
- })
23531
- }
23532
-
23533
- return (
23534
- <>
23535
- <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
23536
- {formValue.itemList.map((item, index) => (
23537
- <div className="sfg-row" key={index}>
23538
- <div className="sfg-col-4">
23539
- <SpsLabel for={formMeta.fields.itemList.fields[index]}>
23540
- Item
23541
- </SpsLabel>
23542
- <SpsTextInput
23543
- value={item}
23544
- formMeta={formMeta.fields.itemList.fields[index]}
23545
- />
23546
- </div>
23547
- <div className="sfg-col-1">
23548
- <SpsButton
23549
- kind={ButtonKind.ICON}
23550
- icon={SpsIcon.TRASH}
23551
- className="sps-label-spacing"
23552
- onClick={() => removeItem(index)}
23553
- />
23554
- </div>
23555
- </div>
23556
- ))}
23557
- <div className="sfg-row">
23558
- <div className="sfg-col-12">
23559
- <SpsButton
23560
- className="mr-1"
23561
- kind={ButtonKind.KEY}
23562
- icon={SpsIcon.PLUS_SIGN}
23563
- onClick={addItem}
23564
- >
23565
- Add Item
23566
- </SpsButton>
23567
- <SpsButton className="mr-1" onClick={reset}>
23568
- Reset
23569
- </SpsButton>
23570
- <SpsButton
23571
- type={ButtonType.SUBMIT}
23572
- kind={ButtonKind.CONFIRM}
23573
- >
23574
- Submit
23575
- </SpsButton>
23576
- </div>
23577
- </div>
23578
- </SpsForm>
23579
- <br />
23580
- {JSON.stringify(formValue)}
23581
- </>
23582
- )
23583
- }
23584
- `
23585
- }
23586
- }
23587
- },
23588
- c_dynamic_group: {
23589
- label: "Dynamic Group",
23590
- description: "",
23591
- examples: {
23592
- basic: {
23593
- react: code`
23594
- function DemoComponent() {
23595
- const initValue = {
23596
- name: "Foo",
23597
- }
23598
- const { formValue, formMeta, updateForm } = useSpsForm(initValue)
23599
-
23600
- function handleFieldsetToggle(enabled) {
23601
- if (enabled) {
23602
- updateForm({
23603
- ...formValue,
23604
- other_stuff: {
23605
- tagline: "",
23606
- description: "",
23607
- },
23608
- })
23609
- } else {
23610
- updateForm(omit(formValue, "other_stuff"))
23611
- }
23612
- }
23613
-
23614
- function handleSubmit() {
23615
- console.log("submit", formValue)
23616
- }
23617
- function reset() {
23618
- updateForm(initValue)
23619
- }
23620
-
23621
- return (
23622
- <>
23623
- <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
23624
- <div className="sfg-row">
23625
- <div className="sfg-col-8">
23626
- <SpsLabel for={formMeta.fields.name}>Name</SpsLabel>
23627
- <SpsTextInput
23628
- value={formValue.name}
23629
- formMeta={formMeta.fields.name}
23630
- />
23631
- </div>
23632
- <div className="sfg-col-4"></div>
23633
- </div>
23634
- <div className="sfg-row">
23635
- <div className="sfg-col-12">
23636
- <SpsFieldset
23637
- optional
23638
- enabled={formMeta.fields.other_stuff}
23639
- formMeta={formMeta.fields.other_stuff}
23640
- onToggled={handleFieldsetToggle}
23641
- legend="Other Stuff"
23642
- >
23643
- {formMeta.fields.other_stuff && (
23644
- <>
23645
- <div className="sfg-row">
23646
- <div className="sfg-col-12">
23647
- <SpsLabel
23648
- for={formMeta.fields.other_stuff.fields.tagline}
23649
- >
23650
- Tagline
23651
- </SpsLabel>
23652
- <SpsTextInput
23653
- value={formValue.other_stuff.tagline}
23654
- formMeta={formMeta.fields.other_stuff.fields.tagline}
23655
- />
23656
- </div>
23657
- </div>
23658
- <div className="sfg-row">
23659
- <div className="sfg-col-12">
23660
- <SpsLabel
23661
- for={formMeta.fields.other_stuff.fields.description}
23662
- >
23663
- Description
23664
- </SpsLabel>
23665
- <SpsTextInput
23666
- value={formValue.other_stuff.description}
23667
- formMeta={
23668
- formMeta.fields.other_stuff.fields.description
23669
- }
23670
- />
23671
- </div>
23672
- </div>
23673
- </>
23674
- )}
23675
- </SpsFieldset>
23676
- </div>
23677
- </div>
23678
- <div className="sfg-row">
23679
- <div className="sfg-col-12">
23680
- <SpsButton className="mr-1" onClick={reset}>
23681
- Reset
23682
- </SpsButton>
23683
- <SpsButton
23684
- type={ButtonType.SUBMIT}
23685
- kind={ButtonKind.CONFIRM}
23686
- >
23687
- Submit
23688
- </SpsButton>
23689
- </div>
23690
- </div>
23691
- </SpsForm>
23692
- <br />
23693
- {JSON.stringify(formValue)}
23694
- </>
23695
- )
23696
- }
23697
- `
23698
- }
23699
- }
23700
- },
23701
- preventative_validators: {
23702
- label: "Preventative validators",
23703
- examples: {
23704
- basic: {
23705
- react: code`
23706
- function DemoComponent() {
23707
- const initValue = {
23708
- maxLength: "",
23709
- alpha: "",
23710
- numeric: "",
23711
- nonNumeric: ""
23712
- };
23713
-
23714
- const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
23715
- "maxLength": [SpsValidators.maxLength(5)],
23716
- "alpha": [SpsValidators.alpha],
23717
- "numeric": [SpsValidators.numeric],
23718
- "nonNumeric": [SpsValidators.nonNumeric]
23719
- });
23720
-
23721
- function handleSubmit() {
23722
- console.log("submit", formValue);
23723
- }
23724
-
23725
- function reset() {
23726
- updateForm(initValue);
23727
- formMeta.markAsPristine();
23728
- }
23729
-
23730
- return <>
23731
- <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
23732
- <div className="sfg-row">
23733
- <div className="sfg-col-8">
23734
- <SpsLabel
23735
- for={formMeta.fields.maxLength}
23736
- >
23737
- MaxLength
23738
- </SpsLabel>
23739
- <SpsTextInput
23740
- value={formValue.maxLength}
23741
- formMeta={formMeta.fields.maxLength}
23742
- />
23743
- </div>
23744
- </div>
23745
- <div className="sfg-row">
23746
- <div className="sfg-col-8">
23747
- <SpsLabel
23748
- for={formMeta.fields.alpha}
23749
- >
23750
- Alpha
23751
- </SpsLabel>
23752
- <SpsTextInput
23753
- value={formValue.alpha}
23754
- formMeta={formMeta.fields.alpha}
23755
- />
23756
- </div>
23757
- </div>
23758
- <div className="sfg-row">
23759
- <div className="sfg-col-8">
23760
- <SpsLabel
23761
- for={formMeta.fields.numeric}
23762
- >
23763
- Numeric
23764
- </SpsLabel>
23765
- <SpsTextInput
23766
- value={formValue.numeric}
23767
- formMeta={formMeta.fields.numeric}
23768
- />
23769
- </div>
23770
- </div>
23771
- <div className="sfg-row">
23772
- <div className="sfg-col-8">
23773
- <SpsLabel
23774
- for={formMeta.fields.nonNumeric}
23775
- >
23776
- nonNumeric
23777
- </SpsLabel>
23778
- <SpsTextInput
23779
- value={formValue.nonNumeric}
23780
- formMeta={formMeta.fields.nonNumeric}
23781
- />
23782
- </div>
23783
- </div>
23784
-
23785
- <div className="sfg-row">
23786
- <div className="sfg-col-12">
23787
- <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
23788
- <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
23789
- </div>
23790
- </div>
23791
- </SpsForm>
23792
- </>;
23793
- }
23794
- `
23795
- },
23796
- custom_text: {
23797
- description: () => /* @__PURE__ */ React.createElement("p", null, "Using custom text in the tooltip"),
23798
- react: code`
23799
- function DemoComponent() {
23800
- const initValue = {
23801
- maxLength: ""
23802
- };
23803
-
23804
- const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
23805
- "maxLength": [SpsValidators.maxLength(5)]
23806
- });
23807
-
23808
- return <>
23809
- <SpsForm formMeta={formMeta} >
23810
- <div className="sfg-row">
23811
- <div className="sfg-col-8">
23812
- <SpsLabel
23813
- for={formMeta.fields.maxLength}
23814
- errors={() => formMeta.fields.maxLength.hasPreventativeError("maxLength")
23815
- && "This field accepts a maximum of 5 characters."}
23816
- >
23817
- MaxLength
23818
- </SpsLabel>
23819
- <SpsTextInput
23820
- value={formValue.maxLength}
23821
- formMeta={formMeta.fields.maxLength}
23822
- />
23823
- </div>
23824
- </div>
23825
- </SpsForm>
23826
- </>;
23827
- }
23828
- `
23829
- }
23830
- }
23831
- },
23832
- custom_errors: {
23833
- label: "Custom errors",
23834
- description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "When using custom validators you can specify when to show the errors - on Change, on Blur or on Submit.", /* @__PURE__ */ React.createElement("br", null), "On Blur is the default behavior. If you want to change that behavior you can use", " ", /* @__PURE__ */ React.createElement("b", null, "useCustomValidator hook"), ". It takes validation function as first argument, validator configuration (object containing errorKey as key and ValidationMode as value) as second argument and dependencies as third argument. useCustomValidator returns a React callback of the validation function with the given dependencies."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("b", null, "!Note:"), " useCustomValidator hook will make changes to the global scope and once you set a custom error key you can't change it.")),
23835
- examples: {
23836
- basic: {
23837
- react: code`
23838
- function DemoComponent() {
23839
-
23840
- const customValidator = useCustomValidator(
23841
- (value) => value < 3 ? null : { customErrorKey: true },
23842
- { customErrorKey: ValidationMode.ON_CHANGE }
23843
- // or { customErrorKey: ValidationMode.ON_SUBMIT }
23844
- );
23845
-
23846
- const initValue = {
23847
- customErrorField: "",
23848
- };
23849
-
23850
- const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
23851
- "customErrorField": [customValidator],
23852
- });
23853
-
23854
- function handleSubmit() {
23855
- console.log("submit", formValue);
23856
- }
23857
-
23858
- function reset() {
23859
- updateForm(initValue);
23860
- formMeta.markAsPristine();
23861
- }
23862
-
23863
- return <>
23864
- <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
23865
- <div className="sfg-row">
23866
- <div className="sfg-col-8">
23867
- <SpsLabel
23868
- for={formMeta.fields.customErrorField}
23869
- errors={() => formMeta.fields.customErrorField.hasError("customErrorKey")
23870
- && "Custom error description"}
23871
- >
23872
- Custom Error
23873
- </SpsLabel>
23874
- <SpsTextInput
23875
- value={formValue.customErrorField}
23876
- formMeta={formMeta.fields.customErrorField}
23877
- />
23878
- </div>
23879
- </div>
23880
-
23881
- <div className="sfg-row">
23882
- <div className="sfg-col-12">
23883
- <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
23884
- <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
23885
- </div>
23886
- </div>
23887
- </SpsForm>
23888
- </>;
23889
- }
23890
- `
23891
- }
23892
- }
23893
- },
23894
- updating_validators: {
23895
- label: "Updating validators",
23896
- description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "The updateForm function supports a seconds argument (options) that allows modifying multiple field validators at once.")),
23897
- examples: {
23898
- basic: {
23899
- react: code`
23900
- function DemoComponent() {
23901
- const initValue = {
23902
- fieldA: "",
23903
- fieldB: "",
23904
- };
23905
-
23906
- const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
23907
- "fieldA": [SpsValidators.required],
23908
- });
23909
-
23910
- function handleSubmit() {
23911
- console.log("submit", formValue);
23912
- }
23913
-
23914
- function reset() {
23915
- updateForm(initValue, { validators: { fieldA: [SpsValidators.required], fieldB: [] }});
23916
- formMeta.markAsPristine();
23917
- }
23918
-
23919
- // This will make field A non required and field B required in a single operation
23920
- function updateValidators() {
23921
- updateForm(undefined, { validators: { fieldA: [], fieldB: [SpsValidators.required] }});
23922
- }
23923
-
23924
- return <>
23925
- <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>
23926
- <div className="sfg-row">
23927
- <div className="sfg-col-8">
23928
- <SpsLabel
23929
- for={formMeta.fields.fieldA}
23930
- >
23931
- Field A
23932
- </SpsLabel>
23933
- <SpsTextInput
23934
- value={formValue.fieldA}
23935
- formMeta={formMeta.fields.fieldA}
23936
- />
23937
- </div>
23938
- <div className="sfg-col-8">
23939
- <SpsLabel
23940
- for={formMeta.fields.fieldB}
23941
- >
23942
- Field B
23943
- </SpsLabel>
23944
- <SpsTextInput
23945
- value={formValue.fieldB}
23946
- formMeta={formMeta.fields.fieldB}
23947
- />
23948
- </div>
23949
- </div>
23950
-
23951
- <div className="sfg-row">
23952
- <div className="sfg-col-12">
23953
- <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
23954
- <SpsButton className="mr-1" onClick={updateValidators}>Update Validators</SpsButton>
23955
- <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
23956
- </div>
23957
- </div>
23958
- </SpsForm>
23959
- </>;
23960
- }
23961
- `
23962
- }
23963
- }
23964
- }
23965
- };
23440
+ const SpsFormExamples = {};
23966
23441
  const SpsAddRemoveFormRowExamples = {
23967
23442
  ideal: {
23968
23443
  label: "Ideal",
@@ -32820,17 +32295,17 @@ const SpsRadioButtonExamples = {
32820
32295
  <SpsForm formMeta={formMeta}>
32821
32296
  <table>
32822
32297
  <tr>
32823
- <td style={{ width: 130 }}>
32298
+ <td style={{ width: "8.125rem" }}>
32824
32299
  <SpsLabel for={formMeta.fields.categories}>Radio Label</SpsLabel>
32825
32300
  </td>
32826
- <td style={{ width: 50 }}>
32827
- <div style={{ textAlign: "center", marginBottom: 5 }}>Option</div>
32301
+ <td style={{ width: "3.125rem" }}>
32302
+ <div className="text-center mb-1">Option</div>
32828
32303
  </td>
32829
- <td style={{ width: 50 }}>
32830
- <div style={{ textAlign: "center", marginBottom: 5 }}>Option</div>
32304
+ <td style={{ width: "3.125rem" }}>
32305
+ <div className="text-center mb-1">Option</div>
32831
32306
  </td>
32832
- <td style={{ width: 50 }}>
32833
- <div style={{ textAlign: "center", marginBottom: 5 }}>Option</div>
32307
+ <td style={{ width: "3.125rem" }}>
32308
+ <div className="text-center mb-1">Option</div>
32834
32309
  </td>
32835
32310
  </tr>
32836
32311
  <tr>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@spscommerce/ds-react",
3
3
  "description": "SPS Design System React components",
4
- "version": "6.6.0",
4
+ "version": "6.7.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,11 +28,11 @@
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@react-stately/collections": "^3.3.3",
31
- "@spscommerce/ds-colors": "6.6.0",
32
- "@spscommerce/ds-illustrations": "6.6.0",
33
- "@spscommerce/ds-shared": "6.6.0",
34
- "@spscommerce/positioning": "6.6.0",
35
- "@spscommerce/utils": "6.6.0",
31
+ "@spscommerce/ds-colors": "6.7.0",
32
+ "@spscommerce/ds-illustrations": "6.7.0",
33
+ "@spscommerce/ds-shared": "6.7.0",
34
+ "@spscommerce/positioning": "6.7.0",
35
+ "@spscommerce/utils": "6.7.0",
36
36
  "moment": "^2.25.3",
37
37
  "moment-timezone": "^0.5.28",
38
38
  "react": "^16.9.0",
@@ -40,11 +40,11 @@
40
40
  },
41
41
  "devDependencies": {
42
42
  "@react-stately/collections": "^3.3.3",
43
- "@spscommerce/ds-colors": "6.6.0",
44
- "@spscommerce/ds-illustrations": "6.6.0",
45
- "@spscommerce/ds-shared": "6.6.0",
46
- "@spscommerce/positioning": "6.6.0",
47
- "@spscommerce/utils": "6.6.0",
43
+ "@spscommerce/ds-colors": "6.7.0",
44
+ "@spscommerce/ds-illustrations": "6.7.0",
45
+ "@spscommerce/ds-shared": "6.7.0",
46
+ "@spscommerce/positioning": "6.7.0",
47
+ "@spscommerce/utils": "6.7.0",
48
48
  "@testing-library/react": "^9.3.2",
49
49
  "@types/prop-types": "^15.7.1",
50
50
  "@types/react": "^16.9.0",