@seeqdev/qomponents 0.0.16 → 0.0.17

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 (80) hide show
  1. package/README.md +13 -2
  2. package/dist/example/package-lock.json +3369 -0
  3. package/dist/example/src/ComplexSelectExample.tsx +81 -0
  4. package/dist/example/src/Example.tsx +11 -2
  5. package/dist/example/src/index.css +20 -0
  6. package/dist/example/src/main.tsx +1 -1
  7. package/dist/example/tsconfig.node.json +4 -2
  8. package/package.json +2 -2
  9. package/dist/Button/Button.js +0 -71
  10. package/dist/Button/Button.js.map +0 -1
  11. package/dist/Button/Button.stories.js +0 -58
  12. package/dist/Button/Button.stories.js.map +0 -1
  13. package/dist/Button/Button.test.js +0 -49
  14. package/dist/Button/Button.test.js.map +0 -1
  15. package/dist/Button/Button.types.js +0 -4
  16. package/dist/Button/Button.types.js.map +0 -1
  17. package/dist/Button/index.js +0 -2
  18. package/dist/Button/index.js.map +0 -1
  19. package/dist/Checkbox/Checkbox.js +0 -23
  20. package/dist/Checkbox/Checkbox.js.map +0 -1
  21. package/dist/Checkbox/Checkbox.stories.js +0 -29
  22. package/dist/Checkbox/Checkbox.stories.js.map +0 -1
  23. package/dist/Checkbox/Checkbox.test.js +0 -94
  24. package/dist/Checkbox/Checkbox.test.js.map +0 -1
  25. package/dist/Checkbox/Checkbox.types.js +0 -2
  26. package/dist/Checkbox/Checkbox.types.js.map +0 -1
  27. package/dist/Checkbox/index.js +0 -2
  28. package/dist/Checkbox/index.js.map +0 -1
  29. package/dist/Icon/Icon.js +0 -54
  30. package/dist/Icon/Icon.js.map +0 -1
  31. package/dist/Icon/Icon.stories.js +0 -40
  32. package/dist/Icon/Icon.stories.js.map +0 -1
  33. package/dist/Icon/Icon.test.js +0 -55
  34. package/dist/Icon/Icon.test.js.map +0 -1
  35. package/dist/Icon/Icon.types.js +0 -16
  36. package/dist/Icon/Icon.types.js.map +0 -1
  37. package/dist/Icon/index.js +0 -2
  38. package/dist/Icon/index.js.map +0 -1
  39. package/dist/Select/Select.js +0 -168
  40. package/dist/Select/Select.js.map +0 -1
  41. package/dist/Select/Select.stories.js +0 -72
  42. package/dist/Select/Select.stories.js.map +0 -1
  43. package/dist/Select/Select.test.js +0 -161
  44. package/dist/Select/Select.test.js.map +0 -1
  45. package/dist/Select/Select.types.js +0 -2
  46. package/dist/Select/Select.types.js.map +0 -1
  47. package/dist/Select/index.js +0 -2
  48. package/dist/Select/index.js.map +0 -1
  49. package/dist/TextArea/TextArea.js +0 -15
  50. package/dist/TextArea/TextArea.js.map +0 -1
  51. package/dist/TextArea/TextArea.stories.js +0 -35
  52. package/dist/TextArea/TextArea.stories.js.map +0 -1
  53. package/dist/TextArea/TextArea.test.js +0 -68
  54. package/dist/TextArea/TextArea.test.js.map +0 -1
  55. package/dist/TextArea/TextArea.types.js +0 -2
  56. package/dist/TextArea/TextArea.types.js.map +0 -1
  57. package/dist/TextArea/index.js +0 -2
  58. package/dist/TextArea/index.js.map +0 -1
  59. package/dist/TextField/TextField.js +0 -56
  60. package/dist/TextField/TextField.js.map +0 -1
  61. package/dist/TextField/TextField.stories.js +0 -37
  62. package/dist/TextField/TextField.stories.js.map +0 -1
  63. package/dist/TextField/TextField.test.js +0 -35
  64. package/dist/TextField/TextField.test.js.map +0 -1
  65. package/dist/TextField/TextField.types.js +0 -2
  66. package/dist/TextField/TextField.types.js.map +0 -1
  67. package/dist/TextField/index.js +0 -2
  68. package/dist/TextField/index.js.map +0 -1
  69. package/dist/Tooltip/Tooltip.js +0 -30
  70. package/dist/Tooltip/Tooltip.js.map +0 -1
  71. package/dist/Tooltip/Tooltip.stories.js +0 -32
  72. package/dist/Tooltip/Tooltip.stories.js.map +0 -1
  73. package/dist/Tooltip/Tooltip.types.js +0 -3
  74. package/dist/Tooltip/Tooltip.types.js.map +0 -1
  75. package/dist/Tooltip/index.js +0 -2
  76. package/dist/Tooltip/index.js.map +0 -1
  77. package/dist/types.js +0 -2
  78. package/dist/types.js.map +0 -1
  79. package/dist/utils/browserId.js +0 -29
  80. package/dist/utils/browserId.js.map +0 -1
@@ -0,0 +1,81 @@
1
+ import React from 'react';
2
+ import { Icon, Select } from '@seeqdev/qomponents';
3
+
4
+ export interface SelectOption {
5
+ id: string;
6
+ label: string;
7
+ color: string;
8
+ asset: string;
9
+ type: 'SCALAR' | 'STRING' | 'NUMERIC';
10
+ }
11
+
12
+ const options: SelectOption[] = [
13
+ { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
14
+ { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
15
+ { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
16
+ ];
17
+
18
+ interface ComplexSelectExampleProps {
19
+ onChange: (selectedOption: SelectOption) => void;
20
+ value: SelectOption | undefined;
21
+ }
22
+
23
+ function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
24
+ const getIcon = (type: string) => {
25
+ switch (type) {
26
+ case 'STRING':
27
+ return 'fa fa-font';
28
+ case 'SCALAR':
29
+ return 'fc-scalar';
30
+ default:
31
+ return 'fc-series';
32
+ }
33
+ };
34
+ /**
35
+ * This function formats the select option as desired. You can apply css styling here or use additional qomponents
36
+ * to style the select option display.
37
+ *
38
+ * You can use the same function to format the selected value or use a different one (sometimes having a separate
39
+ * function is helpful if you want to limit the space that is taken up by the selected option).
40
+ *
41
+ * This example shows how to use an additional Icon component (styled in color based on the select option) as well
42
+ * as how to display the properties of the select option
43
+ */
44
+ const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
45
+ return (
46
+ <div className="selectOptionWrapperDiv">
47
+ <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
48
+ <div className="selectOptionDiv">
49
+ <div className="selectOption">
50
+ <strong>{optionValue.label}</strong>
51
+ </div>
52
+ <div className="selectOptionSubText">{optionValue.asset}</div>
53
+ </div>
54
+ </div>
55
+ );
56
+ };
57
+ const getOptionValue = (option: SelectOption) => {
58
+ return option.id;
59
+ };
60
+
61
+ return (
62
+ // use the getOptionLabel function to provide a custom render function that determines how the select options
63
+ // are displayed
64
+ // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
65
+ // option is displayed
66
+ <Select
67
+ placeholder="formatted select options"
68
+ extraClassNames="formElementWidth"
69
+ options={options}
70
+ value={value}
71
+ getOptionLabel={getOptionLabel}
72
+ getOptionValue={getOptionValue}
73
+ getSelectedValueLabel={getOptionLabel}
74
+ onChange={(selectedOption: SelectOption) => {
75
+ onChange(selectedOption);
76
+ }}
77
+ />
78
+ );
79
+ }
80
+
81
+ export default ComplexSelectExample;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { Button, Checkbox, Icon, Select, TextArea, TextField, Tooltip } from '@seeqdev/qomponents';
3
+ import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
3
4
 
4
5
  const availableThemes = [
5
6
  { display: 'Analysis', value: 'color_analysis' },
@@ -23,7 +24,7 @@ function Example() {
23
24
  */
24
25
  const [theme, setTheme] = React.useState('color_analysis');
25
26
  /**
26
- * qomponents also support dark-mode. To reder qomponents using dark-mode wrap your addOn in a div and assign the
27
+ * qomponents also support dark-mode. To render qomponents using dark-mode wrap your addOn in a div and assign the
27
28
  * class "tw-dark" for dark-mode or "tw-light" for light mode.
28
29
  */
29
30
  const [mode, setMode] = React.useState('tw-light');
@@ -34,6 +35,7 @@ function Example() {
34
35
  const [textFieldValue, setTextFieldValue] = React.useState('');
35
36
  const [textAreaValue, setTextAreaValue] = React.useState('');
36
37
  const [selectValue, setSelectValue] = React.useState();
38
+ const [complexSelectedValue, setComplexSelectedValue] = React.useState<SelectOption>();
37
39
  const [display, setDisplay] = React.useState('');
38
40
  const [easeOfUse, setEaseOfUse] = React.useState(false);
39
41
  const [lookAndFeel, setLookAndFeel] = React.useState(false);
@@ -91,7 +93,7 @@ function Example() {
91
93
  <div className="labelWidth">Description</div>
92
94
  <TextArea
93
95
  value={textAreaValue}
94
- onChange={(e) => setTextAreaValue(e.target.value)}
96
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextAreaValue(e.target.value)}
95
97
  extraClassNames="formElementWidth"
96
98
  placeholder="provide some text here"
97
99
  />
@@ -120,6 +122,13 @@ function Example() {
120
122
  placeholder="please choose"
121
123
  />
122
124
  </div>
125
+ <div className="formRow">
126
+ <div className="labelWidth">Advanced</div>
127
+ <ComplexSelectExample
128
+ value={complexSelectedValue}
129
+ onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
130
+ />
131
+ </div>
123
132
  <div className="buttonRow">
124
133
  <Button
125
134
  label="Cancel"
@@ -71,3 +71,23 @@
71
71
  margin-left: 10px;
72
72
  }
73
73
 
74
+ /* styles for complexSelect*/
75
+ .selectOptionWrapperDiv {
76
+ display: flex;
77
+ flex-direction: row;
78
+ align-items: center;
79
+ height: 34px;
80
+ }
81
+
82
+ .selectOptionDiv {
83
+ display: flex;
84
+ flex-direction: column;
85
+ }
86
+
87
+ .selectOptionSubText {
88
+ font-size: smaller;
89
+ padding: 0;
90
+ margin-top: -6px;
91
+ }
92
+
93
+ /* end styles for complexSelect*/
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
- import Example from './Example.tsx';
3
+ import Example from './Example';
4
4
  import './index.css';
5
5
 
6
6
  ReactDOM.createRoot(document.body as HTMLElement).render(
@@ -3,8 +3,10 @@
3
3
  "composite": true,
4
4
  "skipLibCheck": true,
5
5
  "module": "ESNext",
6
- "moduleResolution": "bundler",
6
+ "moduleResolution": "node",
7
7
  "allowSyntheticDefaultImports": true
8
8
  },
9
- "include": ["vite.config.ts"]
9
+ "include": [
10
+ "vite.config.ts"
11
+ ]
10
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seeqdev/qomponents",
3
- "version": "0.0.16",
3
+ "version": "0.0.17",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.js",
@@ -28,7 +28,7 @@
28
28
  "bugs": {
29
29
  "url": "TODO"
30
30
  },
31
- "homepage": "TODO",
31
+ "homepage": "https://seeq12.github.io/qomponents-documentation/",
32
32
  "peerDependencies": {
33
33
  "react": ">=17.0.0",
34
34
  "react-dom": ">=17.0.0"
@@ -1,71 +0,0 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- import { browserIsFirefox } from '../utils/browserId';
4
- import Tooltip from '../Tooltip';
5
- import Icon from '../Icon';
6
- /**
7
- * All-in-one Button:
8
- * - use "variant" to achieve the desired style
9
- * - include tooltips and/or icons
10
- */
11
- const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
12
- const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
13
- const baseClassesByVariant = {
14
- 'outline': 'tw-border-solid tw-border',
15
- 'theme': 'disabled:tw-bg-opacity-50',
16
- 'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
17
- 'theme-light': 'disabled:tw-bg-opacity-50',
18
- 'no-border': '',
19
- 'warning': 'tw-bg-sq-warning-color',
20
- };
21
- const textClassesByVariantLightTheme = {
22
- 'outline': 'tw-text-sq-text-color',
23
- 'theme': 'tw-text-white',
24
- 'theme-light': 'tw-text-white',
25
- 'danger': 'tw-text-white',
26
- 'no-border': 'tw-text-sq-text-color',
27
- 'warning': 'tw-text-white',
28
- };
29
- const textClassesByVariantDarkTheme = {
30
- 'outline': 'dark:tw-text-sq-dark-text',
31
- 'theme': 'dark:tw-text-white',
32
- 'theme-light': 'dark:tw-text-white',
33
- 'danger': 'dark:tw-text-white',
34
- 'no-border': 'dark:tw-text-sq-dark-text',
35
- 'warning': 'dark:tw-text-white',
36
- };
37
- const classesByVariantLightTheme = {
38
- 'outline': 'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
39
- ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
40
- 'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',
41
- 'danger': '',
42
- 'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',
43
- 'no-border': '',
44
- 'warning': 'tw-bg-sq-warning-color',
45
- };
46
- const classesByVariantDarkTheme = {
47
- 'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
48
- ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +
49
- ' dark:active:tw-border-sq-color-dark',
50
- 'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',
51
- 'danger': '',
52
- 'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',
53
- 'no-border': '',
54
- 'warning': '',
55
- };
56
- const sizeClasses = {
57
- sm: 'tw-text-sm',
58
- lg: 'tw-text-xl',
59
- };
60
- const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
61
- const button = (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
62
- stopPropagation && e.stopPropagation();
63
- onClick && onClick();
64
- }, className: appliedClasses },
65
- icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ?
66
- `tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
67
- label));
68
- return tooltip ? (React.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
69
- };
70
- export default Button;
71
- //# sourceMappingURL=Button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
@@ -1,58 +0,0 @@
1
- import React from 'react';
2
- import Button from './Button';
3
- import { buttonVariants } from './Button.types';
4
- export default {
5
- title: 'Button',
6
- };
7
- export const AllButtonVariants = () => {
8
- const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-grid tw-grid-cols-2 tw-gap-4" },
9
- React.createElement("div", { className: "tw-p-4" },
10
- React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })),
11
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
12
- React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })))))));
13
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
14
- React.createElement("div", { className: "color_topic" },
15
- React.createElement("b", null, "Topic Colors"),
16
- renderAllVariations()),
17
- React.createElement("div", { className: "color_analysis" },
18
- React.createElement("b", null, "Analysis Colors"),
19
- renderAllVariations()),
20
- React.createElement("div", { className: "color_datalab" },
21
- React.createElement("b", null, "Datalab Colors"),
22
- renderAllVariations())));
23
- };
24
- export const ButtonWithTooltip = () => {
25
- const renderButtonWithTooltip = () => (React.createElement(React.Fragment, null,
26
- React.createElement("div", { className: "tw-p-4" },
27
- React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })),
28
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
29
- React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }))));
30
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
31
- React.createElement("div", { className: "color_topic" },
32
- React.createElement("b", null, "Topic Colors"),
33
- renderButtonWithTooltip()),
34
- React.createElement("div", { className: "color_analysis" },
35
- React.createElement("b", null, "Analysis Colors"),
36
- renderButtonWithTooltip()),
37
- React.createElement("div", { className: "color_datalab" },
38
- React.createElement("b", null, "Datalab Colors"),
39
- renderButtonWithTooltip())));
40
- };
41
- export const ButtonWithIcon = () => {
42
- const renderButtonWithIcon = () => (React.createElement(React.Fragment, null,
43
- React.createElement("div", { className: "tw-p-4" },
44
- React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })),
45
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
46
- React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }))));
47
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
48
- React.createElement("div", { className: "color_topic" },
49
- React.createElement("b", null, "Topic Colors"),
50
- renderButtonWithIcon()),
51
- React.createElement("div", { className: "color_analysis" },
52
- React.createElement("b", null, "Analysis Colors"),
53
- renderButtonWithIcon()),
54
- React.createElement("div", { className: "color_datalab" },
55
- React.createElement("b", null, "Datalab Colors"),
56
- renderButtonWithIcon())));
57
- };
58
- //# sourceMappingURL=Button.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"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"}
@@ -1,49 +0,0 @@
1
- import React from 'react';
2
- import '@testing-library/jest-dom';
3
- import { render, screen } from '@testing-library/react';
4
- import userEvent from '@testing-library/user-event';
5
- import Button from './Button';
6
- describe('Button', () => {
7
- class Context {
8
- testId = 'buttonTestId';
9
- label = 'button label';
10
- props = {
11
- label: this.label,
12
- onClick: jest.fn(),
13
- testId: this.testId,
14
- };
15
- }
16
- let tc;
17
- beforeEach(() => {
18
- tc = new Context();
19
- });
20
- const renderButton = (props) => render(React.createElement(Button, { ...props }));
21
- it('renders button label', () => {
22
- renderButton(tc.props);
23
- expect(screen.getByText(tc.label)).toBeInTheDocument();
24
- });
25
- it('calls on click', async () => {
26
- renderButton(tc.props);
27
- await userEvent.click(screen.getByTestId(tc.testId));
28
- expect(tc.props.onClick).toHaveBeenCalled();
29
- });
30
- it('renders disabled button', () => {
31
- renderButton({ ...tc.props, disabled: true });
32
- expect(screen.getByText(tc.label)).toBeDisabled();
33
- });
34
- it('respects stopPropagation default', async () => {
35
- const callOnPropagation = jest.fn();
36
- render(React.createElement("div", { onClick: callOnPropagation },
37
- React.createElement(Button, { ...tc.props })));
38
- await userEvent.click(screen.getByTestId(tc.testId));
39
- expect(callOnPropagation).not.toHaveBeenCalled();
40
- });
41
- it('propagates click event if not told not to', async () => {
42
- const callOnPropagation = jest.fn();
43
- render(React.createElement("div", { onClick: callOnPropagation },
44
- React.createElement(Button, { ...{ ...tc.props, stopPropagation: false } })));
45
- await userEvent.click(screen.getByTestId(tc.testId));
46
- expect(callOnPropagation).toHaveBeenCalled();
47
- });
48
- });
49
- //# sourceMappingURL=Button.test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.test.js","sourceRoot":"","sources":["../../src/Button/Button.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAgB;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;YAClB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,CAAC,CAAC;IAE3E,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,CAAC,KAAK,GAAI,CACpB,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CACJ,6BAAK,OAAO,EAAE,iBAAiB;YAC7B,oBAAC,MAAM,OAAK,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,CACnD,CACP,CAAC;QACF,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
@@ -1,4 +0,0 @@
1
- export const buttonTypes = ['button', 'reset', 'submit', 'link'];
2
- export const buttonSizes = ['sm', 'lg'];
3
- export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
4
- //# sourceMappingURL=Button.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AACjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAU,CAAC"}
@@ -1,2 +0,0 @@
1
- export { default } from "./Button";
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
@@ -1,23 +0,0 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- const alignment = 'tw-flex tw-items-center';
4
- const labelClasses = 'tw-ml-1.5 tw-text-sm';
5
- const baseClasses = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
6
- ' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +
7
- ' checked:tw-text-sq-text-color' +
8
- ' disabled:tw-text-sq-fairly-dark-gray';
9
- const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;
10
- const radioClasses = `tw-form-radio ${baseClasses}`;
11
- /**
12
- * Checkbox and Radio Box Component.
13
- */
14
- export const Checkbox = (props) => {
15
- const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
16
- const assignedId = id ?? 'checkbox_' + Math.random();
17
- return (React.createElement("span", { className: `${alignment} ${extraClassNames}` },
18
- React.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
19
- React.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
20
- ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
21
- : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
22
- };
23
- //# sourceMappingURL=Checkbox.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,yBAAyB,CAAC;AAC5C,MAAM,YAAY,GAAG,sBAAsB,CAAC;AAE5C,MAAM,WAAW,GACf,4GAA4G;IAC5G,6FAA6F;IAC7F,iCAAiC;IACjC,uCAAuC,CAAC;AAE1C,MAAM,eAAe,GAAG,+BAA+B,WAAW,EAAE,CAAC;AAErE,MAAM,YAAY,GAAG,iBAAiB,WAAW,EAAE,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA2C,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EACJ,IAAI,GAAG,UAAU,EACjB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAAc,EACd,EAAE,EACF,IAAI,EACJ,eAAe,EACf,oBAAoB,EACpB,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAErD,OAAO,CACL,8BAAM,SAAS,EAAE,GAAG,SAAS,IAAI,eAAe,EAAE;QAChD,+BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,iBACG,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,GAAG,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,IAChE,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBACvC,EAAE,EACF,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB;QACF,+BACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,GAAG,YAAY,IAAI,oBAAoB,IAChD,QAAQ;gBACN,CAAC,CAAC,oFAAoF;gBACtF,CAAC,CAAC,mEACN,EAAE,IACD,KAAK,CACA,CACH,CACR,CAAC;AACJ,CAAC,CAAC"}
@@ -1,29 +0,0 @@
1
- import React from 'react';
2
- import { Checkbox } from './Checkbox';
3
- export default {
4
- title: 'Checkbox',
5
- };
6
- export const AllCheckboxes = () => {
7
- const getDisplay = (type) => (React.createElement(React.Fragment, null,
8
- React.createElement("div", { className: "tw-p-4" },
9
- React.createElement(Checkbox, { value: "a", type: type, checked: true, label: 'with Label' })),
10
- React.createElement("div", { className: "tw-p-4" },
11
- React.createElement(Checkbox, { value: "d", type: type, checked: false, disabled: true, label: "Disabled" })),
12
- React.createElement("div", { className: "tw-p-4" },
13
- React.createElement(Checkbox, { value: "d", type: type, checked: true, disabled: true, label: "Disabled" })),
14
- React.createElement("div", { className: "tw-p-4" },
15
- React.createElement(Checkbox, { value: "b", type: type, checked: true })),
16
- React.createElement("div", { className: "tw-p-4" },
17
- React.createElement(Checkbox, { value: "c", type: type, checked: false }))));
18
- const renderAllVariations = (type) => (React.createElement(React.Fragment, null,
19
- React.createElement("div", { className: "tw-p-4 light" }, getDisplay(type)),
20
- React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" }, getDisplay(type))));
21
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4" },
22
- React.createElement("div", null,
23
- React.createElement("b", null, "Checkbox"),
24
- renderAllVariations('checkbox')),
25
- React.createElement("div", null,
26
- React.createElement("b", null, "Radios"),
27
- renderAllVariations('radio'))));
28
- };
29
- //# sourceMappingURL=Checkbox.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,eAAe;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,UAAU,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CACjD;QACE,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,GAAI,CAClE;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,GAAG,CAC/E;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,GAAG,CAC9E;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,GAAI,CAC7C;QACN,6BAAK,SAAS,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,GAAI,CAC9C,CACL,CACJ,CAAC;IACF,MAAM,mBAAmB,GAAG,CAAC,IAA0B,EAAE,EAAE,CAAC,CAC1D;QACE,6BAAK,SAAS,EAAC,cAAc,IAAE,UAAU,CAAC,IAAI,CAAC,CAAO;QACtD,6BAAK,SAAS,EAAC,yCAAyC,IAAE,UAAU,CAAC,IAAI,CAAC,CAAO,CAChF,CACJ,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C;YACE,0CAAe;YACd,mBAAmB,CAAC,UAAU,CAAC,CAC5B;QAEN;YACE,wCAAa;YACZ,mBAAmB,CAAC,OAAO,CAAC,CACzB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,94 +0,0 @@
1
- import React from 'react';
2
- import '@testing-library/jest-dom';
3
- import { render, screen } from '@testing-library/react';
4
- import { Checkbox } from './Checkbox';
5
- import userEvent from '@testing-library/user-event';
6
- describe('Checkbox', () => {
7
- class Context {
8
- testId = 'checkboxTestId';
9
- props = {
10
- onChange: jest.fn(),
11
- checked: false,
12
- testId: this.testId,
13
- };
14
- }
15
- let tc;
16
- beforeEach(() => {
17
- tc = new Context();
18
- });
19
- const renderCheckbox = (props) => render(React.createElement(Checkbox, { ...props }));
20
- it('renders checkbox', () => {
21
- renderCheckbox(tc.props);
22
- expect(screen.getByTestId(tc.testId)).toBeInTheDocument();
23
- });
24
- it('renders radio', () => {
25
- renderCheckbox({ ...tc.props, type: 'radio' });
26
- expect(screen.getByTestId(tc.testId)).toHaveProperty('type', 'radio');
27
- });
28
- it('renders label', () => {
29
- const label = 'look at this checkbox!';
30
- renderCheckbox({ ...tc.props, label });
31
- expect(screen.getByText(label)).toBeInTheDocument();
32
- });
33
- it('respects checked', () => {
34
- renderCheckbox({ ...tc.props, checked: true });
35
- expect(screen.getByTestId(tc.testId)).toBeChecked();
36
- });
37
- it('calls onChange handler', async () => {
38
- const onChange = jest.fn();
39
- renderCheckbox({ ...tc.props, onChange });
40
- await userEvent.click(screen.getByTestId(tc.testId));
41
- expect(onChange).toHaveBeenCalled();
42
- });
43
- it('calls onKeyDown handler', async () => {
44
- const onKeyDown = jest.fn();
45
- renderCheckbox({ ...tc.props, onKeyDown });
46
- await userEvent.type(screen.getByTestId(tc.testId), 'a');
47
- expect(onKeyDown).toHaveBeenCalled();
48
- });
49
- it('calls onClickHandler handler', async () => {
50
- const onClick = jest.fn();
51
- renderCheckbox({ ...tc.props, onClick });
52
- await userEvent.click(screen.getByTestId(tc.testId));
53
- expect(onClick).toHaveBeenCalled();
54
- });
55
- it('respects disabled', () => {
56
- renderCheckbox({ ...tc.props, disabled: true });
57
- expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
58
- });
59
- it('renders label clickable', async () => {
60
- const label = 'amazing checkbox';
61
- const onClick = jest.fn();
62
- renderCheckbox({ ...tc.props, label, onClick });
63
- expect(screen.getByTestId(tc.testId)).not.toBeChecked();
64
- await userEvent.click(screen.getByText(label));
65
- expect(onClick).toHaveBeenCalled();
66
- });
67
- it('respects id', () => {
68
- const id = 'checkboxId';
69
- renderCheckbox({ ...tc.props, id });
70
- expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
71
- });
72
- it('respects name', () => {
73
- const name = 'checkboxName';
74
- renderCheckbox({ ...tc.props, name });
75
- expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
76
- });
77
- it('respects name', () => {
78
- const value = 'priceless';
79
- renderCheckbox({ ...tc.props, value });
80
- expect(screen.getByTestId(tc.testId)).toHaveProperty('value', value);
81
- });
82
- it('applies extraClassNames', () => {
83
- const extraClassNames = 'extra styling so fancy';
84
- renderCheckbox({ ...tc.props, extraClassNames });
85
- expect(screen.getByTestId(tc.testId).parentNode).toHaveClass(extraClassNames);
86
- });
87
- it('applies extraLabelClassNames', () => {
88
- const extraLabelClassNames = 'special label';
89
- const label = 'amazing checkbox';
90
- renderCheckbox({ ...tc.props, extraLabelClassNames, label });
91
- expect(screen.getByText(label)).toHaveClass(extraLabelClassNames);
92
- });
93
- });
94
- //# sourceMappingURL=Checkbox.test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox.test.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.test.tsx"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=Checkbox.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.types.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export { Checkbox as default } from './Checkbox';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}