react-science 19.10.0 → 19.10.2

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 (9) hide show
  1. package/lib/components/form/components/field_groups/svg_text_style.js +17 -8
  2. package/lib/components/form/components/field_groups/svg_text_style.js.map +1 -1
  3. package/lib/components/form/components/field_groups/svg_text_style.schema.js +1 -1
  4. package/lib/components/form/components/input_groups/form_group.js +1 -1
  5. package/lib/components/form/components/input_groups/form_group.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/form/components/field_groups/svg_text_style.schema.ts +1 -1
  8. package/src/components/form/components/field_groups/svg_text_style.tsx +34 -10
  9. package/src/components/form/components/input_groups/form_group.tsx +1 -1
package/lib/components/form/components/field_groups/svg_text_style.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Checkbox } from '@blueprintjs/core';
2
+ import { Callout, Checkbox } from '@blueprintjs/core';
3
3
  import styled from '@emotion/styled';
4
- import { memo } from 'react';
5
4
  import { SVGStyledText } from '../../../svg/index.js';
6
5
  import { withFieldGroup } from '../../context/use_ts_form.js';
7
6
  import { FormGroup } from '../input_groups/form_group.js';
@@ -11,6 +10,7 @@ const TextStyleSwitchContainer = styled.div `
11
10
  display: flex;
12
11
  flex-direction: row;
13
12
  gap: 1rem;
13
+ height: 30px;
14
14
  `;
15
15
  // https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#reusing-groups-of-fields-in-multiple-forms
16
16
  // Default values are not used at runtime (same for props).
@@ -22,21 +22,30 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
22
22
  defaultValues,
23
23
  props: inferSVGTextStyleFieldsProps,
24
24
  render: function SVGTextStyleFields({ group, label, previewText = 'Placeholder', }) {
25
- return (_jsxs(Fieldset, { children: [_jsx(Legend, { children: label }), _jsx(group.AppField, { name: "fill", children: (field) => _jsx(field.ColorPicker, { label: "Color" }) }), _jsx(group.AppField, { name: "fontSize", children: (field) => _jsx(field.NumericInput, { label: "Font size" }) }), _jsx(FormGroup, { label: "Font style", children: _jsxs(TextStyleSwitchContainer, { children: [_jsx(group.Field, { name: "fontWeight", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(BoldLabel, { children: "Bold" }), name: field.name, checked: fontWeightToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontWeight(e.target.checked)), onBlur: field.handleBlur })) }), _jsx(group.Field, { name: "fontStyle", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(ItalicLabel, { children: "Italic" }), name: field.name, checked: fontStyleToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontStyle(e.target.checked)), onBlur: field.handleBlur })) })] }) }), _jsx(FormGroup, { label: "Preview", children: _jsx(group.Subscribe, { selector: (state) => state.values, children: (values) => (_jsx(TextStyleFieldPreview, { ...values, children: previewText })) }) })] }));
25
+ return (_jsxs(Fieldset, { children: [_jsx(Legend, { children: label }), _jsx(group.AppField, { name: "fill", children: (field) => _jsx(field.ColorPicker, { label: "Color" }) }), _jsx(group.AppField, { name: "fontSize", children: (field) => _jsx(field.NumericInput, { label: "Font size", min: 1 }) }), _jsx(FormGroup, { label: "Font style", children: _jsxs(TextStyleSwitchContainer, { children: [_jsx(group.Field, { name: "fontWeight", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(BoldLabel, { children: "Bold" }), name: field.name, checked: fontWeightToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontWeight(e.target.checked)), onBlur: field.handleBlur })) }), _jsx(group.Field, { name: "fontStyle", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(ItalicLabel, { children: "Italic" }), name: field.name, checked: fontStyleToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontStyle(e.target.checked)), onBlur: field.handleBlur })) })] }) }), _jsx(FormGroup, { label: "Preview", children: _jsx(group.Subscribe, { selector: (state) => state.values, children: (values) => (_jsx(TextStyleFieldPreview, { ...values, children: previewText })) }) })] }));
26
26
  },
27
27
  });
28
+ const TextStyleFieldPreviewErrorContainer = styled.ul `
29
+ & > li {
30
+ margin-left: 15px;
31
+ list-style: disc;
32
+ }
33
+ `;
28
34
  const TextStyleFieldPreviewContainer = styled.div `
29
35
  display: flex;
30
36
  align-items: center;
31
37
  min-height: 30px;
32
38
  `;
33
- const TextStyleFieldPreview = memo(function TextStyleFieldPreview(props) {
34
- const parsedValues = svgTextStyleFieldsSchema.parse(props);
35
- const fontSize = parsedValues.fontSize ?? 16;
39
+ function TextStyleFieldPreview(props) {
40
+ const safeResult = svgTextStyleFieldsSchema.safeParse(props);
41
+ if (!safeResult.success) {
42
+ return (_jsx(Callout, { title: "Cannot render preview with invalid values", intent: "danger", children: _jsx(TextStyleFieldPreviewErrorContainer, { children: safeResult.error.issues.map((error) => (_jsxs("li", { children: [error.path.join('.'), ": $", error.message] }, `${error.path.join('.')}-${error.code}`))) }) }));
43
+ }
44
+ const fontSize = safeResult.data.fontSize ?? 16;
36
45
  const svgHeight = Math.round(fontSize * 1.5);
37
46
  const textY = Math.round(svgHeight / 4);
38
- return (_jsx(TextStyleFieldPreviewContainer, { children: _jsx("svg", { height: svgHeight, width: "auto", children: _jsx(SVGStyledText, { dominantBaseline: "hanging", x: 0, y: textY, ...parsedValues, children: props.children }) }) }));
39
- });
47
+ return (_jsx(TextStyleFieldPreviewContainer, { children: _jsx("svg", { height: svgHeight, width: "auto", children: _jsx(SVGStyledText, { dominantBaseline: "hanging", x: 0, y: textY, ...safeResult.data, children: props.children }) }) }));
48
+ }
40
49
  const BoldLabel = styled.span `
41
50
  font-weight: bold;
42
51
  `;
package/lib/components/form/components/field_groups/svg_text_style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"svg_text_style.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"svg_text_style.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK1C,CAAC;AAIF,2HAA2H;AAC3H,2DAA2D;AAC3D,MAAM,aAAa,GAAuB,EAAE,CAAC;AAO7C,MAAM,4BAA4B,GAA4B;IAC5D,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,cAAc,CAAC;IACzD,aAAa;IACb,KAAK,EAAE,4BAA4B;IACnC,MAAM,EAAE,SAAS,kBAAkB,CAAC,EAClC,KAAK,EACL,KAAK,EACL,WAAW,GAAG,aAAa,GAC5B;QACC,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,MAAM,cAAE,KAAK,GAAU,EACxB,KAAC,KAAK,CAAC,QAAQ,IAAC,IAAI,EAAC,MAAM,YACxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,KAAK,CAAC,WAAW,IAAC,KAAK,EAAC,OAAO,GAAG,GAChC,EACjB,KAAC,KAAK,CAAC,QAAQ,IAAC,IAAI,EAAC,UAAU,YAC5B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,KAAK,CAAC,YAAY,IAAC,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,CAAC,GAAI,GAC7C,EACjB,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,YAC3B,MAAC,wBAAwB,eACvB,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAC,YAAY,YAC3B,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,QAAQ,IACP,YAAY,EAAE,KAAC,SAAS,uBAAiB,EACzC,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAC/C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAE3D,MAAM,EAAE,KAAK,CAAC,UAAU,GACxB,CACH,GACW,EACd,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAC,WAAW,YAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,QAAQ,IACP,YAAY,EAAE,KAAC,WAAW,yBAAqB,EAC/C,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAE1D,MAAM,EAAE,KAAK,CAAC,UAAU,GACxB,CACH,GACW,IACW,GACjB,EAEZ,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,YACxB,KAAC,KAAK,CAAC,SAAS,IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,YAC/C,CAAC,MAAM,EAAE,EAAE,CAAC,CACX,KAAC,qBAAqB,OAAK,MAAM,YAC9B,WAAW,GACU,CACzB,GACe,GACR,IACH,CACZ,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,mCAAmC,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAKpD,CAAC;AAEF,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIhD,CAAC;AAMF,SAAS,qBAAqB,CAAC,KAAiC;IAC9D,MAAM,UAAU,GAAG,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE7D,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;QACxB,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAC,2CAA2C,EACjD,MAAM,EAAC,QAAQ,YAEf,KAAC,mCAAmC,cACjC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtC,yBACG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAK,KAAK,CAAC,OAAO,KADhC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE,CAE3C,CACN,CAAC,GACkC,GAC9B,CACX,CAAC;IACJ,CAAC;IAED,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;IAChD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;IAExC,OAAO,CACL,KAAC,8BAA8B,cAC7B,cAAK,MAAM,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,YAClC,KAAC,aAAa,IACZ,gBAAgB,EAAC,SAAS,EAC1B,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,KAAK,KACJ,UAAU,CAAC,IAAI,YAElB,KAAK,CAAC,QAAQ,GACD,GACZ,GACyB,CAClC,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE5B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE9B,CAAC;AAEF,SAAS,mBAAmB,CAC1B,MAAwC;IAExC,OAAO,MAAM,KAAK,MAAM,CAAC;AAC3B,CAAC;AAED,SAAS,mBAAmB,CAC1B,MAAe;IAEf,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AACpC,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAuC;IACjE,OAAO,MAAM,KAAK,QAAQ,CAAC;AAC7B,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAe;IACzC,OAAO,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;AACtC,CAAC"}
package/lib/components/form/components/field_groups/svg_text_style.schema.js CHANGED
@@ -3,7 +3,7 @@ import { stringToNumberOptional } from "../../utils/validators.js";
3
3
  export const svgTextStyleFieldsSchema = z.object({
4
4
  fill: z.string().optional(),
5
5
  fontSize: stringToNumberOptional({
6
- numSchema: z.int().min(0),
6
+ numSchema: z.int().min(1),
7
7
  parse: (str) => Number.parseInt(str, 10),
8
8
  }),
9
9
  fontStyle: z.enum(['normal', 'italic']).optional(),
package/lib/components/form/components/input_groups/form_group.js CHANGED
@@ -9,6 +9,7 @@ const FormContainer = styled.div `
9
9
  display: grid;
10
10
  margin: 0;
11
11
  grid-template-columns: ${(props) => props.layout === 'inline' ? '[label] 30% [input] 70%' : '1fr'};
12
+ gap: 5px 20px;
12
13
  grid-template-rows: ${(props) => props.layout === 'inline' ? 'auto auto' : 'auto'};
13
14
  `;
14
15
  const RequiredSpan = styled.span `
@@ -31,7 +32,6 @@ const Label = styled.label `
31
32
  ${INPUT_HEIGHT}px - ${(props) => (props.layout === 'inline' ? 26 : 20)}px
32
33
  );
33
34
  grid-column: ${(props) => (props.layout === 'inline' ? 'label' : '1 / -1')};
34
- height: 30px;
35
35
  `;
36
36
  const ErrorAndHelpText = styled.div `
37
37
  display: flex;
package/lib/components/form/components/input_groups/form_group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"form_group.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"form_group.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-science",
3
- "version": "19.10.0",
3
+ "version": "19.10.2",
4
4
  "description": "React components to build scientific applications UI",
5
5
  "type": "module",
6
6
  "exports": {
package/src/components/form/components/field_groups/svg_text_style.schema.ts CHANGED
@@ -5,7 +5,7 @@ import { stringToNumberOptional } from '../../utils/validators.ts';
5
5
  export const svgTextStyleFieldsSchema = z.object({
6
6
  fill: z.string().optional(),
7
7
  fontSize: stringToNumberOptional({
8
- numSchema: z.int().min(0),
8
+ numSchema: z.int().min(1),
9
9
  parse: (str) => Number.parseInt(str, 10),
10
10
  }),
11
11
  fontStyle: z.enum(['normal', 'italic']).optional(),
package/src/components/form/components/field_groups/svg_text_style.tsx CHANGED
@@ -1,7 +1,6 @@
1
- import { Checkbox } from '@blueprintjs/core';
1
+ import { Callout, Checkbox } from '@blueprintjs/core';
2
2
  import styled from '@emotion/styled';
3
3
  import type { ReactNode } from 'react';
4
- import { memo } from 'react';
5
4
  import type { z } from 'zod';
6
5
 
7
6
  import { SVGStyledText } from '../../../svg/index.js';
@@ -15,6 +14,7 @@ const TextStyleSwitchContainer = styled.div`
15
14
  display: flex;
16
15
  flex-direction: row;
17
16
  gap: 1rem;
17
+ height: 30px;
18
18
  `;
19
19
 
20
20
  type SvgTextStyleFields = z.input<typeof svgTextStyleFieldsSchema>;
@@ -47,7 +47,7 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
47
47
  {(field) => <field.ColorPicker label="Color" />}
48
48
  </group.AppField>
49
49
  <group.AppField name="fontSize">
50
- {(field) => <field.NumericInput label="Font size" />}
50
+ {(field) => <field.NumericInput label="Font size" min={1} />}
51
51
  </group.AppField>
52
52
  <FormGroup label="Font style">
53
53
  <TextStyleSwitchContainer>
@@ -94,6 +94,13 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
94
94
  },
95
95
  });
96
96
 
97
+ const TextStyleFieldPreviewErrorContainer = styled.ul`
98
+ & > li {
99
+ margin-left: 15px;
100
+ list-style: disc;
101
+ }
102
+ `;
103
+
97
104
  const TextStyleFieldPreviewContainer = styled.div`
98
105
  display: flex;
99
106
  align-items: center;
@@ -104,11 +111,27 @@ interface TextStyleFieldPreviewProps extends SvgTextStyleFields {
104
111
  children?: ReactNode;
105
112
  }
106
113
 
107
- const TextStyleFieldPreview = memo(function TextStyleFieldPreview(
108
- props: TextStyleFieldPreviewProps,
109
- ) {
110
- const parsedValues = svgTextStyleFieldsSchema.parse(props);
111
- const fontSize = parsedValues.fontSize ?? 16;
114
+ function TextStyleFieldPreview(props: TextStyleFieldPreviewProps) {
115
+ const safeResult = svgTextStyleFieldsSchema.safeParse(props);
116
+
117
+ if (!safeResult.success) {
118
+ return (
119
+ <Callout
120
+ title="Cannot render preview with invalid values"
121
+ intent="danger"
122
+ >
123
+ <TextStyleFieldPreviewErrorContainer>
124
+ {safeResult.error.issues.map((error) => (
125
+ <li key={`${error.path.join('.')}-${error.code}`}>
126
+ {error.path.join('.')}: ${error.message}
127
+ </li>
128
+ ))}
129
+ </TextStyleFieldPreviewErrorContainer>
130
+ </Callout>
131
+ );
132
+ }
133
+
134
+ const fontSize = safeResult.data.fontSize ?? 16;
112
135
  const svgHeight = Math.round(fontSize * 1.5);
113
136
  const textY = Math.round(svgHeight / 4);
114
137
 
@@ -119,18 +142,19 @@ const TextStyleFieldPreview = memo(function TextStyleFieldPreview(
119
142
  dominantBaseline="hanging"
120
143
  x={0}
121
144
  y={textY}
122
- {...parsedValues}
145
+ {...safeResult.data}
123
146
  >
124
147
  {props.children}
125
148
  </SVGStyledText>
126
149
  </svg>
127
150
  </TextStyleFieldPreviewContainer>
128
151
  );
129
- });
152
+ }
130
153
 
131
154
  const BoldLabel = styled.span`
132
155
  font-weight: bold;
133
156
  `;
157
+
134
158
  const ItalicLabel = styled.span`
135
159
  font-style: italic;
136
160
  `;
package/src/components/form/components/input_groups/form_group.tsx CHANGED
@@ -17,6 +17,7 @@ const FormContainer = styled.div<{
17
17
  margin: 0;
18
18
  grid-template-columns: ${(props) =>
19
19
  props.layout === 'inline' ? '[label] 30% [input] 70%' : '1fr'};
20
+ gap: 5px 20px;
20
21
  grid-template-rows: ${(props) =>
21
22
  props.layout === 'inline' ? 'auto auto' : 'auto'};
22
23
  `;
@@ -49,7 +50,6 @@ const Label = styled.label<{ layout: Layout }>`
49
50
  ${INPUT_HEIGHT}px - ${(props) => (props.layout === 'inline' ? 26 : 20)}px
50
51
  );
51
52
  grid-column: ${(props) => (props.layout === 'inline' ? 'label' : '1 / -1')};
52
- height: 30px;
53
53
  `;
54
54
 
55
55
  const ErrorAndHelpText = styled.div`