pentatrion-design 0.2.4 → 0.2.5
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/README.md +12 -0
- package/components/button/Button.js +1 -0
- package/package.json +79 -79
- package/components/autocomplete/_fixtures.d.ts +0 -3
- package/components/autocomplete/_fixtures.js +0 -46
- package/components/button/Button.test.d.ts +0 -1
- package/components/button/Button.test.js +0 -17
- package/components/input/Input.test.d.ts +0 -1
- package/components/input/Input.test.js +0 -11
- package/components/popover/Popover.test.d.ts +0 -1
- package/components/popover/Popover.test.js +0 -12
- package/components/select/Select.test.d.ts +0 -1
- package/components/select/Select.test.js +0 -15
- package/components/select/_fixtures.d.ts +0 -28
- package/components/select/_fixtures.js +0 -62
- package/components/tooltip/Tooltip.test.d.ts +0 -1
- package/components/tooltip/Tooltip.test.js +0 -13
- package/hooks/useCombinedRefs.test.d.ts +0 -1
- package/hooks/useCombinedRefs.test.js +0 -34
- package/hooks/useRipple.test.d.ts +0 -1
- package/hooks/useRipple.test.js +0 -34
- package/styles/Content.d.ts +0 -1
- package/styles/Content.js +0 -4
package/README.md
CHANGED
|
@@ -116,6 +116,18 @@ export default config;
|
|
|
116
116
|
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
+
fichier `tsconfig.json`.
|
|
120
|
+
```json
|
|
121
|
+
{
|
|
122
|
+
"compilerOptions": {
|
|
123
|
+
"paths": {
|
|
124
|
+
"pentatrion-design/*": ["./*"]
|
|
125
|
+
},
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
|
|
119
131
|
La dépendance `pentatrion-fonts` est optionnelle.
|
|
120
132
|
|
|
121
133
|
Mettre à jour `src/App.tsx`
|
|
@@ -3,6 +3,7 @@ import { forwardRef, useImperativeHandle, useRef } from "react";
|
|
|
3
3
|
import clsx from "clsx";
|
|
4
4
|
import { Loader } from "../loader/index.js";
|
|
5
5
|
import { useRipple } from "../../hooks/index.js";
|
|
6
|
+
console.log("hell");
|
|
6
7
|
export const buttonVariants = {
|
|
7
8
|
size(icon, size) {
|
|
8
9
|
if (size === "custom") {
|
package/package.json
CHANGED
|
@@ -1,150 +1,150 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pentatrion-design",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Hugues Tavernier",
|
|
7
7
|
"license": "ISC",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
-
"
|
|
11
|
-
"
|
|
10
|
+
"types": "./index.d.ts",
|
|
11
|
+
"default": "./index.js"
|
|
12
12
|
},
|
|
13
13
|
"./types": {
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
},
|
|
17
|
-
"./hooks": {
|
|
18
|
-
"default": "./hooks/index.js",
|
|
19
|
-
"types": "./hooks/index.d.ts"
|
|
20
|
-
},
|
|
21
|
-
"./lib": {
|
|
22
|
-
"default": "./lib/index.js",
|
|
23
|
-
"types": "./lib/index.d.ts"
|
|
24
|
-
},
|
|
25
|
-
"./tailwind": {
|
|
26
|
-
"default": "./tailwind/index.js",
|
|
27
|
-
"types": "./tailwind/index.d.ts"
|
|
28
|
-
},
|
|
29
|
-
"./redux/notification": {
|
|
30
|
-
"default": "./redux/notification/index.js",
|
|
31
|
-
"types": "./redux/notification/index.d.ts"
|
|
14
|
+
"types": "./types.d.ts",
|
|
15
|
+
"default": "./types.js"
|
|
32
16
|
},
|
|
33
17
|
"./components/autocomplete": {
|
|
34
|
-
"
|
|
35
|
-
"
|
|
18
|
+
"types": "./components/autocomplete/index.d.ts",
|
|
19
|
+
"default": "./components/autocomplete/index.js"
|
|
36
20
|
},
|
|
37
21
|
"./components/badge": {
|
|
38
|
-
"
|
|
39
|
-
"
|
|
22
|
+
"types": "./components/badge/index.d.ts",
|
|
23
|
+
"default": "./components/badge/index.js"
|
|
40
24
|
},
|
|
41
25
|
"./components/button": {
|
|
42
|
-
"
|
|
43
|
-
"
|
|
26
|
+
"types": "./components/button/index.d.ts",
|
|
27
|
+
"default": "./components/button/index.js"
|
|
44
28
|
},
|
|
45
29
|
"./components/card": {
|
|
46
|
-
"
|
|
47
|
-
"
|
|
30
|
+
"types": "./components/card/index.d.ts",
|
|
31
|
+
"default": "./components/card/index.js"
|
|
48
32
|
},
|
|
49
33
|
"./components/code": {
|
|
50
|
-
"
|
|
51
|
-
"
|
|
34
|
+
"types": "./components/code/index.d.ts",
|
|
35
|
+
"default": "./components/code/index.js"
|
|
52
36
|
},
|
|
53
37
|
"./components/context-menu": {
|
|
54
|
-
"
|
|
55
|
-
"
|
|
38
|
+
"types": "./components/context/index.d.ts",
|
|
39
|
+
"default": "./components/context/index.js"
|
|
56
40
|
},
|
|
57
41
|
"./components/dialog": {
|
|
58
|
-
"
|
|
59
|
-
"
|
|
42
|
+
"types": "./components/dialog/index.d.ts",
|
|
43
|
+
"default": "./components/dialog/index.js"
|
|
60
44
|
},
|
|
61
45
|
"./components/dropdown-menu": {
|
|
62
|
-
"
|
|
63
|
-
"
|
|
46
|
+
"types": "./components/dropdown/index.d.ts",
|
|
47
|
+
"default": "./components/dropdown/index.js"
|
|
64
48
|
},
|
|
65
49
|
"./components/dropdown-menu-nested": {
|
|
66
|
-
"
|
|
67
|
-
"
|
|
50
|
+
"types": "./components/dropdown/index.d.ts",
|
|
51
|
+
"default": "./components/dropdown/index.js"
|
|
68
52
|
},
|
|
69
53
|
"./components/flash": {
|
|
70
|
-
"
|
|
71
|
-
"
|
|
54
|
+
"types": "./components/flash/index.d.ts",
|
|
55
|
+
"default": "./components/flash/index.js"
|
|
72
56
|
},
|
|
73
57
|
"./components/highlight": {
|
|
74
|
-
"
|
|
75
|
-
"
|
|
58
|
+
"types": "./components/highlight/index.d.ts",
|
|
59
|
+
"default": "./components/highlight/index.js"
|
|
76
60
|
},
|
|
77
61
|
"./components/href": {
|
|
78
|
-
"
|
|
79
|
-
"
|
|
62
|
+
"types": "./components/href/index.d.ts",
|
|
63
|
+
"default": "./components/href/index.js"
|
|
80
64
|
},
|
|
81
65
|
"./components/input": {
|
|
82
|
-
"
|
|
83
|
-
"
|
|
66
|
+
"types": "./components/input/index.d.ts",
|
|
67
|
+
"default": "./components/input/index.js"
|
|
84
68
|
},
|
|
85
69
|
"./components/input-field": {
|
|
86
|
-
"
|
|
87
|
-
"
|
|
70
|
+
"types": "./components/input/index.d.ts",
|
|
71
|
+
"default": "./components/input/index.js"
|
|
88
72
|
},
|
|
89
73
|
"./components/loader": {
|
|
90
|
-
"
|
|
91
|
-
"
|
|
74
|
+
"types": "./components/loader/index.d.ts",
|
|
75
|
+
"default": "./components/loader/index.js"
|
|
92
76
|
},
|
|
93
77
|
"./components/modal": {
|
|
94
|
-
"
|
|
95
|
-
"
|
|
78
|
+
"types": "./components/modal/index.d.ts",
|
|
79
|
+
"default": "./components/modal/index.js"
|
|
96
80
|
},
|
|
97
81
|
"./components/notification": {
|
|
98
|
-
"
|
|
99
|
-
"
|
|
82
|
+
"types": "./components/notification/index.d.ts",
|
|
83
|
+
"default": "./components/notification/index.js"
|
|
100
84
|
},
|
|
101
85
|
"./components/popover": {
|
|
102
|
-
"
|
|
103
|
-
"
|
|
86
|
+
"types": "./components/popover/index.d.ts",
|
|
87
|
+
"default": "./components/popover/index.js"
|
|
104
88
|
},
|
|
105
89
|
"./components/portal": {
|
|
106
|
-
"
|
|
107
|
-
"
|
|
90
|
+
"types": "./components/portal/index.d.ts",
|
|
91
|
+
"default": "./components/portal/index.js"
|
|
108
92
|
},
|
|
109
93
|
"./components/resize-area": {
|
|
110
|
-
"
|
|
111
|
-
"
|
|
94
|
+
"types": "./components/resize/index.d.ts",
|
|
95
|
+
"default": "./components/resize/index.js"
|
|
112
96
|
},
|
|
113
97
|
"./components/scroll": {
|
|
114
|
-
"
|
|
115
|
-
"
|
|
98
|
+
"types": "./components/scroll/index.d.ts",
|
|
99
|
+
"default": "./components/scroll/index.js"
|
|
116
100
|
},
|
|
117
101
|
"./components/select": {
|
|
118
|
-
"
|
|
119
|
-
"
|
|
102
|
+
"types": "./components/select/index.d.ts",
|
|
103
|
+
"default": "./components/select/index.js"
|
|
120
104
|
},
|
|
121
105
|
"./components/snack": {
|
|
122
|
-
"
|
|
123
|
-
"
|
|
106
|
+
"types": "./components/snack/index.d.ts",
|
|
107
|
+
"default": "./components/snack/index.js"
|
|
124
108
|
},
|
|
125
109
|
"./components/sortable": {
|
|
126
|
-
"
|
|
127
|
-
"
|
|
110
|
+
"types": "./components/sortable/index.d.ts",
|
|
111
|
+
"default": "./components/sortable/index.js"
|
|
128
112
|
},
|
|
129
113
|
"./components/steps": {
|
|
130
|
-
"
|
|
131
|
-
"
|
|
114
|
+
"types": "./components/steps/index.d.ts",
|
|
115
|
+
"default": "./components/steps/index.js"
|
|
132
116
|
},
|
|
133
117
|
"./components/table": {
|
|
134
|
-
"
|
|
135
|
-
"
|
|
118
|
+
"types": "./components/table/index.d.ts",
|
|
119
|
+
"default": "./components/table/index.js"
|
|
136
120
|
},
|
|
137
121
|
"./components/tabs": {
|
|
138
|
-
"
|
|
139
|
-
"
|
|
122
|
+
"types": "./components/tabs/index.d.ts",
|
|
123
|
+
"default": "./components/tabs/index.js"
|
|
140
124
|
},
|
|
141
125
|
"./components/textarea": {
|
|
142
|
-
"
|
|
143
|
-
"
|
|
126
|
+
"types": "./components/textarea/index.d.ts",
|
|
127
|
+
"default": "./components/textarea/index.js"
|
|
144
128
|
},
|
|
145
129
|
"./components/tooltip": {
|
|
146
|
-
"
|
|
147
|
-
"
|
|
130
|
+
"types": "./components/tooltip/index.d.ts",
|
|
131
|
+
"default": "./components/tooltip/index.js"
|
|
132
|
+
},
|
|
133
|
+
"./hooks": {
|
|
134
|
+
"types": "./hooks/index.d.ts",
|
|
135
|
+
"default": "./hooks/index.js"
|
|
136
|
+
},
|
|
137
|
+
"./lib": {
|
|
138
|
+
"types": "./lib/index.d.ts",
|
|
139
|
+
"default": "./lib/index.js"
|
|
140
|
+
},
|
|
141
|
+
"./redux/notification": {
|
|
142
|
+
"types": "./redux/notification/index.d.ts",
|
|
143
|
+
"default": "./redux/notification/index.js"
|
|
144
|
+
},
|
|
145
|
+
"./tailwind": {
|
|
146
|
+
"types": "./tailwind/index.d.ts",
|
|
147
|
+
"default": "./tailwind/index.js"
|
|
148
148
|
}
|
|
149
149
|
},
|
|
150
150
|
"type": "module",
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import Fuse from "fuse.js";
|
|
2
|
-
export const options = [
|
|
3
|
-
{ value: "abbeville", label: "Abbeville" },
|
|
4
|
-
{ value: "agde", label: "Agde" },
|
|
5
|
-
{ value: "agen", label: "Agen" },
|
|
6
|
-
{ value: "aixenprovence", label: "Aix-en-Provence" },
|
|
7
|
-
{ value: "ajaccio", label: "Ajaccio" },
|
|
8
|
-
{ value: "albi", label: "Albi" },
|
|
9
|
-
{ value: "alencon", label: "Alençon" },
|
|
10
|
-
{ value: "amiens", label: "Amiens" },
|
|
11
|
-
{ value: "angers", label: "Angers" },
|
|
12
|
-
{ value: "angouleme", label: "Angoulême" },
|
|
13
|
-
{ value: "annonay", label: "Annonay" },
|
|
14
|
-
{ value: "antibes", label: "Antibes" },
|
|
15
|
-
{ value: "arcachon", label: "Arcachon" },
|
|
16
|
-
{ value: "arles", label: "Arles" },
|
|
17
|
-
{ value: "arras", label: "Arras" },
|
|
18
|
-
{ value: "asnieres-sur-seine", label: "Asnières-sur-Seine" },
|
|
19
|
-
{ value: "aubagne", label: "Aubagne" },
|
|
20
|
-
{ value: "aubervilliers", label: "Aubervilliers" },
|
|
21
|
-
{ value: "aulnay-sous-bois", label: "Aulnay-sous-Bois" },
|
|
22
|
-
{ value: "avignon", label: "Avignon" },
|
|
23
|
-
{ value: "avranches", label: "Avranches" },
|
|
24
|
-
{ value: "avoriaz", label: "Avoriaz" },
|
|
25
|
-
{ value: "avray", label: "Avray" },
|
|
26
|
-
];
|
|
27
|
-
async function mockServerRequest(searchValue) {
|
|
28
|
-
await new Promise((resolve) => {
|
|
29
|
-
setTimeout(resolve, Math.random() * 1000);
|
|
30
|
-
});
|
|
31
|
-
const res = await fetch(`/town-74.json`);
|
|
32
|
-
const towns = (await res.json());
|
|
33
|
-
const fuse = new Fuse(towns, {
|
|
34
|
-
minMatchCharLength: 2,
|
|
35
|
-
keys: ["nom_commune"],
|
|
36
|
-
});
|
|
37
|
-
const results = fuse.search(searchValue);
|
|
38
|
-
return results.map(({ item }) => ({
|
|
39
|
-
label: item.context,
|
|
40
|
-
value: item.insee,
|
|
41
|
-
}));
|
|
42
|
-
}
|
|
43
|
-
export const handleChangeSearchValue = async (searchValue) => {
|
|
44
|
-
const results = await mockServerRequest(searchValue);
|
|
45
|
-
return results;
|
|
46
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cleanup, fireEvent, render } from "@testing-library/react";
|
|
3
|
-
import { describe, it, expect, vi, afterEach } from "vitest";
|
|
4
|
-
import { Button } from "./Button.js";
|
|
5
|
-
afterEach(cleanup);
|
|
6
|
-
describe("<Button />", () => {
|
|
7
|
-
it("forwards className", () => {
|
|
8
|
-
const { getByRole } = render(_jsx(Button, { className: "custom" }));
|
|
9
|
-
expect(getByRole("button")).toHaveClass("custom");
|
|
10
|
-
});
|
|
11
|
-
it("handle click", () => {
|
|
12
|
-
const mockOnClick = vi.fn();
|
|
13
|
-
const { getByRole } = render(_jsx(Button, { onClick: mockOnClick, children: "Click Me" }));
|
|
14
|
-
fireEvent.click(getByRole("button"));
|
|
15
|
-
expect(mockOnClick).toHaveBeenCalledTimes(1);
|
|
16
|
-
});
|
|
17
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { describe, it, expect } from "vitest";
|
|
3
|
-
import { render } from "@testing-library/react";
|
|
4
|
-
import { Input } from "./Input.js";
|
|
5
|
-
describe("Input component", () => {
|
|
6
|
-
it("forward className to <input> element", () => {
|
|
7
|
-
const { container } = render(_jsx(Input, { className: "custom" }));
|
|
8
|
-
const rootElement = container.firstChild;
|
|
9
|
-
expect(rootElement).toHaveClass("custom");
|
|
10
|
-
});
|
|
11
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cleanup, fireEvent, render } from "@testing-library/react";
|
|
3
|
-
import { afterEach, describe, it } from "vitest";
|
|
4
|
-
import { Popover, PopoverContent, PopoverDescription, PopoverTrigger } from "./index.js";
|
|
5
|
-
afterEach(cleanup);
|
|
6
|
-
describe("<Popover />", () => {
|
|
7
|
-
it("open popup on click", async () => {
|
|
8
|
-
const { getByText, getByRole } = render(_jsxs(Popover, { color: "yellow", children: [_jsx(PopoverTrigger, { children: "My trigger" }), _jsx(PopoverContent, { children: _jsx(PopoverDescription, { children: "Content" }) })] }));
|
|
9
|
-
fireEvent.click(getByRole("button"));
|
|
10
|
-
getByText("Content");
|
|
11
|
-
});
|
|
12
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { render, screen } from "@testing-library/react";
|
|
3
|
-
import userEvent from "@testing-library/user-event";
|
|
4
|
-
import { describe, expect, it } from "vitest";
|
|
5
|
-
import { Select } from "./Select.js";
|
|
6
|
-
describe("<Select />", () => {
|
|
7
|
-
it("should open on click", async () => {
|
|
8
|
-
const options = [{ label: "foo", value: "foo" }];
|
|
9
|
-
const user = userEvent.setup();
|
|
10
|
-
render(_jsx(Select, { options: options, onChange: () => { } }));
|
|
11
|
-
await user.click(screen.getByRole("button"));
|
|
12
|
-
const list = await screen.findByTestId("select-list");
|
|
13
|
-
expect(list).toBeInTheDocument();
|
|
14
|
-
});
|
|
15
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { SelectSelectionProps, Option } from "./index.js";
|
|
2
|
-
export declare const departments: {
|
|
3
|
-
value: string;
|
|
4
|
-
label: string;
|
|
5
|
-
}[];
|
|
6
|
-
export declare const townsByDepartment: {
|
|
7
|
-
"38": {
|
|
8
|
-
value: string;
|
|
9
|
-
label: string;
|
|
10
|
-
}[];
|
|
11
|
-
"73": {
|
|
12
|
-
value: string;
|
|
13
|
-
label: string;
|
|
14
|
-
}[];
|
|
15
|
-
"74": {
|
|
16
|
-
value: string;
|
|
17
|
-
label: string;
|
|
18
|
-
}[];
|
|
19
|
-
};
|
|
20
|
-
export declare const options: {
|
|
21
|
-
value: string;
|
|
22
|
-
label: string;
|
|
23
|
-
}[];
|
|
24
|
-
export declare function SelectOptionComponent({ icon, label }: StarOption): import("react/jsx-runtime").JSX.Element;
|
|
25
|
-
export type StarOption = Option & {
|
|
26
|
-
icon: string;
|
|
27
|
-
};
|
|
28
|
-
export declare function SelectSelectionComponent({ label, icon }: SelectSelectionProps<StarOption>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useListItem } from "@floating-ui/react";
|
|
3
|
-
import clsx from "clsx";
|
|
4
|
-
import { useSelect } from "./index.js";
|
|
5
|
-
export const departments = [
|
|
6
|
-
{ value: "38", label: "Isère" },
|
|
7
|
-
{ value: "74", label: "Haute-Savoie" },
|
|
8
|
-
{ value: "73", label: "Savoie" },
|
|
9
|
-
];
|
|
10
|
-
export const townsByDepartment = {
|
|
11
|
-
"38": [
|
|
12
|
-
{ value: "grenoble", label: "Grenoble" },
|
|
13
|
-
{ value: "meylan", label: "Meylan" },
|
|
14
|
-
{ value: "voreppe", label: "Voreppe" },
|
|
15
|
-
],
|
|
16
|
-
"73": [
|
|
17
|
-
{ value: "chambery", label: "Chambéry" },
|
|
18
|
-
{ value: "albertville", label: "Albertville" },
|
|
19
|
-
],
|
|
20
|
-
"74": [
|
|
21
|
-
{ value: "annecy", label: "Annecy" },
|
|
22
|
-
{ value: "annemasse", label: "Annemasse" },
|
|
23
|
-
{ value: "avoriaz", label: "Avoriaz" },
|
|
24
|
-
],
|
|
25
|
-
};
|
|
26
|
-
export const options = [
|
|
27
|
-
{ value: "abbeville", label: "Abbeville" },
|
|
28
|
-
{ value: "agde", label: "Agde" },
|
|
29
|
-
{ value: "agen", label: "Agen" },
|
|
30
|
-
{ value: "aixenprovence", label: "Aix-en-Provence" },
|
|
31
|
-
{ value: "ajaccio", label: "Ajaccio" },
|
|
32
|
-
{ value: "albi", label: "Albi" },
|
|
33
|
-
{ value: "alencon", label: "Alençon" },
|
|
34
|
-
{ value: "amiens", label: "Amiens" },
|
|
35
|
-
{ value: "angers", label: "Angers" },
|
|
36
|
-
{ value: "angouleme", label: "Angoulême" },
|
|
37
|
-
{ value: "annonay", label: "Annonay" },
|
|
38
|
-
{ value: "antibes", label: "Antibes" },
|
|
39
|
-
{ value: "arcachon", label: "Arcachon" },
|
|
40
|
-
{ value: "arles", label: "Arles" },
|
|
41
|
-
{ value: "arras", label: "Arras" },
|
|
42
|
-
{ value: "asnieres-sur-seine", label: "Asnières-sur-Seine" },
|
|
43
|
-
{ value: "aubagne", label: "Aubagne" },
|
|
44
|
-
{ value: "aubervilliers", label: "Aubervilliers" },
|
|
45
|
-
{ value: "aulnay-sous-bois", label: "Aulnay-sous-Bois" },
|
|
46
|
-
{ value: "avignon", label: "Avignon" },
|
|
47
|
-
{ value: "avranches", label: "Avranches" },
|
|
48
|
-
{ value: "avoriaz", label: "Avoriaz" },
|
|
49
|
-
{ value: "avray", label: "Avray" },
|
|
50
|
-
];
|
|
51
|
-
export function SelectOptionComponent({ icon, label }) {
|
|
52
|
-
const { activeIndex, selectedIndex, getItemProps, handleSelect } = useSelect();
|
|
53
|
-
const { ref, index } = useListItem({ label });
|
|
54
|
-
const isActive = activeIndex === index;
|
|
55
|
-
const isSelected = selectedIndex === index;
|
|
56
|
-
return (_jsxs("button", { className: clsx("option", isSelected ? "bg-gray-2" : isActive && "bg-gray-1"), ref: ref, role: "option", "aria-selected": isActive && isSelected, tabIndex: isActive ? 0 : -1, ...getItemProps({
|
|
57
|
-
onClick: () => handleSelect(index),
|
|
58
|
-
}), children: [_jsx("i", { className: icon }), " ", label] }));
|
|
59
|
-
}
|
|
60
|
-
export function SelectSelectionComponent({ label, icon }) {
|
|
61
|
-
return label ? (_jsx("span", { children: _jsx("i", { className: icon }) })) : (_jsx("span", { children: "?" }));
|
|
62
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cleanup, fireEvent, render } from "@testing-library/react";
|
|
3
|
-
import { afterEach, describe, expect, it } from "vitest";
|
|
4
|
-
import { SimpleTooltip } from "./SimpleTooltip.js";
|
|
5
|
-
afterEach(cleanup);
|
|
6
|
-
describe("<Tooltip />", () => {
|
|
7
|
-
it("show the popup", async () => {
|
|
8
|
-
const { getByText, findByText } = render(_jsx(SimpleTooltip, { openDelay: 1, content: "details", children: "tooltip" }));
|
|
9
|
-
fireEvent.mouseEnter(getByText("tooltip"));
|
|
10
|
-
const details = await findByText("details");
|
|
11
|
-
expect(details).toBeInTheDocument();
|
|
12
|
-
});
|
|
13
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createElement, useEffect, useRef } from "react";
|
|
3
|
-
import { render } from "@testing-library/react";
|
|
4
|
-
import { useCombinedRefs } from "./useCombinedRefs.js";
|
|
5
|
-
import { describe, expect, it, vi } from "vitest";
|
|
6
|
-
describe("useCombinedRefs", () => {
|
|
7
|
-
it("should correctly combine refs into one ref", async () => {
|
|
8
|
-
const cbRef = vi.fn();
|
|
9
|
-
const refs = { a: null, b: null };
|
|
10
|
-
const Test = () => {
|
|
11
|
-
const refA = useRef(null);
|
|
12
|
-
const refB = useRef(null);
|
|
13
|
-
const combinedRef = useCombinedRefs(refA, refB, cbRef, undefined);
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
refs.a = refA.current;
|
|
16
|
-
refs.b = refB.current;
|
|
17
|
-
return () => {
|
|
18
|
-
refs.a = refA.current;
|
|
19
|
-
refs.b = refB.current;
|
|
20
|
-
};
|
|
21
|
-
});
|
|
22
|
-
return _jsx("div", { ref: combinedRef, "data-testid": "div" });
|
|
23
|
-
};
|
|
24
|
-
const { getByTestId, rerender } = render(createElement(Test));
|
|
25
|
-
const div = getByTestId("div");
|
|
26
|
-
expect(refs.a).toBe(div);
|
|
27
|
-
expect(refs.b).toBe(div);
|
|
28
|
-
expect(cbRef).toHaveBeenCalledWith(div);
|
|
29
|
-
rerender(_jsx("div", {}));
|
|
30
|
-
expect(cbRef).toHaveBeenCalledWith(null);
|
|
31
|
-
expect(refs.a).toBe(null);
|
|
32
|
-
expect(refs.b).toBe(null);
|
|
33
|
-
});
|
|
34
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/hooks/useRipple.test.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useRef } from "react";
|
|
3
|
-
import { afterEach, describe, it, vi } from "vitest";
|
|
4
|
-
import { useRipple } from "./index.js";
|
|
5
|
-
import { cleanup, fireEvent, render } from "@testing-library/react";
|
|
6
|
-
const TestEltWithRipple = () => {
|
|
7
|
-
const ref = useRef(null);
|
|
8
|
-
const ripples = useRipple(ref);
|
|
9
|
-
return (_jsx("button", { role: "button", ref: ref, children: ripples }));
|
|
10
|
-
};
|
|
11
|
-
afterEach(cleanup);
|
|
12
|
-
describe("useRipple", () => {
|
|
13
|
-
it("add as many ripples as mouse clicks", async ({ expect }) => {
|
|
14
|
-
const { getByRole, getAllByTestId } = render(_jsx(TestEltWithRipple, {}));
|
|
15
|
-
const button = getByRole("button");
|
|
16
|
-
fireEvent.pointerDown(button);
|
|
17
|
-
fireEvent.pointerDown(button);
|
|
18
|
-
expect(getAllByTestId("ripple")).toHaveLength(2);
|
|
19
|
-
});
|
|
20
|
-
it("cleanup after 1 second", ({ expect }) => {
|
|
21
|
-
vi.useFakeTimers();
|
|
22
|
-
const { getByRole, queryAllByTestId, rerender } = render(_jsx(TestEltWithRipple, {}));
|
|
23
|
-
const button = getByRole("button");
|
|
24
|
-
fireEvent.pointerDown(button);
|
|
25
|
-
vi.advanceTimersByTime(999);
|
|
26
|
-
rerender(_jsx(TestEltWithRipple, {}));
|
|
27
|
-
expect(queryAllByTestId("ripple")).toHaveLength(1);
|
|
28
|
-
vi.advanceTimersByTime(999);
|
|
29
|
-
rerender(_jsx(TestEltWithRipple, {}));
|
|
30
|
-
vi.advanceTimersByTime(2);
|
|
31
|
-
expect(queryAllByTestId("ripple")).toHaveLength(0);
|
|
32
|
-
vi.restoreAllMocks();
|
|
33
|
-
});
|
|
34
|
-
});
|
package/styles/Content.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Content(): import("react/jsx-runtime").JSX.Element;
|
package/styles/Content.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
export function Content() {
|
|
3
|
-
return (_jsxs(_Fragment, { children: [_jsx("h1", { children: "This is the H1 Heading" }), _jsxs("p", { children: ["Above this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to ", _jsx("code", { children: "display:none" }), " which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area."] }), _jsx("p", { children: "If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area." }), _jsx("p", { children: "Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme. You need to know what that will look like as part of structuring your styles." }), _jsx("h2", { children: "This is the H2 Heading" }), _jsx("p", { children: "Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content." }), _jsx("p", { children: "However, it is used all over WordPress Themes including the subtitle, tag line, post title, comment area, sidebar area, and even in the footer. Be specific when styling each h2 headings to ensure you are not styling all of them." }), _jsx("h3", { children: "This is the H3 Heading" }), _jsx("p", { children: "Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog's stylesheet." }), _jsxs("p", { children: ["For more information in searching for your styles in your WordPress blog, see", _jsx("a", { title: "CSS: Studying Your CSS Styles", href: "http://codex.wordpress.org/Finding_Your_CSS_Styles", children: "CSS: Studying Your CSS Styles" }), "."] }), _jsxs("p", { children: ["Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the", _jsx("a", { title: "nothing here", href: "#", children: "link color" }), ",", _jsx("a", { title: "nothing here", href: "#", children: "link hover color" }), ", and", _jsx("a", { title: "nothing here", href: "#", children: "visited link color" }), ". Be sure and design for each style."] }), _jsx("h4", { children: "This is the H4 Heading" }), _jsx("p", { children: "In this section under the H4 heading, we\u2019re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want." }), _jsx("p", { children: "Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists." }), _jsxs("ul", { children: [_jsxs("li", { children: ["General Lists using the ", _jsx("code", { children: "<ul>" }), " tag"] }), _jsxs("li", { children: ["Ordered Lists using the ", _jsx("code", { children: "<ol>" }), " tag"] }), _jsxs("li", { children: ["Definition Lists using the ", _jsx("code", { children: "<dl>" }), " tag", _jsx("ul", { children: _jsxs("li", { children: ["Definition Lists use two other tags to generate the list:", _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "<dt>" }), " sets up the word or phrase to be \u201Cdefined\u201D, usually set in bold, and"] }), _jsxs("li", { children: [_jsx("code", { children: "<dd>" }), " sets up the definition, which is usually in a normal or slightly smaller font and indented under the definition."] })] })] }) })] }), _jsx("li", { children: "And that\u2019s the end of the lists" })] }), _jsx("p", { children: "And we\u2019ve just tested a paragraph before and after a general list along with a nested list to help you see what at least three levels of the list will look like. Make sure that each level of the list is styled to match your specific needs. You might want to use the default disc or circle, or you might want to add graphic bullets to your list, too." }), _jsx("h5", { children: "This is the H5 Heading" }), _jsx("p", { children: "While the H5 heading is not always used, maybe you might find a need for it if your H1 and H2 and H3 headings are used. You might need one to two levels of subheadings in your post content, so this one gives you another option." }), _jsx("p", { children: "We also need to look at the other two lists and then add some images and other styles to flesh out your WordPress Theme sandbox." }), _jsxs("ol", { children: [_jsx("li", { children: "You need to do this first." }), _jsxs("li", { children: ["You need to do this second.", _jsxs("ul", { children: [_jsx("li", { children: "You could do this in between." }), _jsx("li", { children: "Or give this a try, too." })] })] }), _jsx("li", { children: "But this is the third and last thing to do." })] }), _jsx("p", { children: "This should give you an idea of how a nested number list would look on your site. Now, let\u2019s look at a definition list." }), _jsxs("dl", { children: [_jsx("dt", { children: "WordPress Themes" }), _jsx("dd", { children: "A WordPress Theme is not a \u201Cskin\u201D. Though many young people call it one. The reality is that a WordPress Theme contains many files that come together in various ways to generate a WordPress web page. A \u201Cskin\u201D simply changes the look, and rarely the results." }), _jsx("dt", { children: "WordPress Plugins" }), _jsx("dd", { children: "WordPress Plugins add flexibility, features, and capabilities to your WordPress site. There are hundreds to choose from. Some add power and control like monitoring and busting comment spam and enhancing your administration features. Others add fun things like random elements and polling and rating systems." })] }), _jsx("p", { children: "And here is another paragraph to show the relationship between the various parts and pieces." }), _jsx("h3", { children: "This is the H3 Heading" }), _jsxs("p", { children: [_jsx("img", { className: "alignright", src: "http://lorelle.files.wordpress.com/daisy1a.jpg", alt: "Daisy, photograph Copyright Brent VanFossen" }), "If the H3 heading is your in-post section heading, then you need to see how it works within the post itself. If it isn\u2019t, simply change the H3 to whatever heading number you are using."] }), _jsxs("p", { children: [_jsx("img", { className: "alignleft", src: "http://lorelle.files.wordpress.com/daisy1a.jpg", alt: "Daisy, photograph Copyright Brent VanFossen" }), "We need to look at how images, another major feature of most WordPress sites, are used within the site. Images tend to sit on the left, right, or middle of your post, depending upon how you are using them. For an image sitting on the left or right, you need to add appropriate padding around the image on the text side to push the text away from the image so the text won\u2019t push up against the edges of the image."] }), _jsx("p", { children: _jsx("img", { className: "aligncenter", src: "http://lorelle.files.wordpress.com/daisy1a.jpg", alt: "Daisy, photograph Copyright Brent VanFossen" }) }), _jsx("p", { children: "A centered image is a little different. It is centered in the middle and the text is pushed above and below it." }), _jsxs("p", { children: ["How to add the CSS styles for images is discussed in the Codex article,", _jsx("a", { title: "Using Images in WordPress", href: "http://codex.wordpress.org/Using_Images", children: "Using Images" }), "."] }), _jsx("h3", { children: "Testing Font Looks - H3 Heading" }), _jsxs("p", { children: ["You will need to test the looks of the different font styles, too.", _jsx("strong", { children: "This is bold and THIS IS BOLD." }), " ", _jsx("em", { children: "This is italic and THIS IS ITALIC." }), _jsx("strong", { children: _jsx("em", { children: "This is bold and italic and THIS IS BOLD AND ITALIC." }) }), _jsx("code", { children: "This is code and THIS IS CODE." }), " And now let\u2019s look at what the PRE tag, also known as the preformatted tag, looks like:"] }), _jsx("pre", { children: "This is the pre tag. It should be formatted as written so if you add spaces to the front of the line it will show the spaces and the <code> as written" }), _jsx("p", { children: "This should be back to the normal paragraph style and we hope you have been paying attention to the margins and padding around each element, including the paragraph, so you can position things appropriately to the rest of the content." }), _jsx("h5", { children: "Your CSS Here - H5 Heading" }), _jsx("p", { children: "Let\u2019s look at the blockquote, one of the most common tags used in most blogs. It is designed to \u201Cframe\u201D a quote from another blog, website, or reference that you are \u201Cquoting\u201D from. For the most part, there are three examples of usage:" }), _jsx("blockquote", { children: "This is a simple quote. It is either preceded or followed by a link within the text to the credited source. A blockquote must be designed to stand out from the rest of the text content, but it does not have to \u201Creally\u201D stand out, just separate itself from the content so we know it\u2019s not your words." }), _jsxs("p", { children: ["A second style to the blockquote is one that includes a citation. Under HTML guidelines, this citation should be wrapped in the ", _jsx("code", { children: "<cite>" }), " tag and then that tag can be styled to be in italics, bold, or whatever look you want in your design."] }), _jsxs("p", { children: ["Take care with the style of the ", _jsx("code", { children: "<cite>" }), " tag as some WordPress Themes use it in the comments area. I recommend you style it specifically with", _jsx("code", { children: "blockquote cite " }), " in your stylesheet."] }), _jsxs("blockquote", { children: ["This is an example of a blockquote which also contains a link to", _jsx("a", { title: "Blog Design and Layout Tips on the WordPress Codex", href: "http://codex.wordpress.org/Blog_Design_and_Layout", children: "Blog Design and Layout" }), "articles on the", _jsx("a", { title: "WordPress Codex - online manual for WordPress Users", href: "http://codex.wordpress.org/", rel: "tag", children: "WordPress Codex" }), ", the online manual for WordPress Users, to help you see what links will look link within a blockquote.", _jsxs("cite", { children: [_jsx("a", { title: "Lorelle on WordPress", href: "http://lorelle.wordpress.com/", children: "Lorelle on WordPress" }), ", your guide to all things WordPress and blogging"] })] }), _jsx("p", { children: "The citation includes a link and text to help you see what a link and text will look like within the cite tag." }), _jsx("p", { children: "There are many tags that can be found within a blockquote, just as can be found within any container within your web page design, but a last example includes an unordered list. Many bloggers love to quote examples from lists, so this is a good tag series to test." }), _jsxs("blockquote", { children: ["Within this web design sandbox test page, we\u2019ve tested:", _jsxs("ul", { children: [_jsx("li", { children: "Headings" }), _jsx("li", { children: "Text styles like bold and italic" }), _jsx("li", { children: "Ordered (numbered) and unordered (bullets) lists" }), _jsx("li", { children: "Links" }), _jsx("li", { children: "Code and PRE tags" }), _jsx("li", { children: "Blockquotes" }), _jsx("li", { children: "And much more\u2026" })] }), "Which should show you what a list looks like within a blockquote."] }), _jsx("p", { children: "Each website is unique with it\u2019s own look and feel for the various parts and pieces. This cut and paste section looks only at what you might have within your content section. So if you will have boxes for lists or little aside information, you will need to add them so you can see how they will look in the overall page layout." }), _jsxs("p", { children: ["Some elements in a", _jsx("a", { title: "WordPress Themes", href: "http://codex.wordpress.org/Using_Themes", children: "WordPress Theme" }), "are controlled by the style sheet, while others are controlled by the Template files. Try to work on as much as you can from the style sheet first, then you can mess with the template files."] }), _jsx("p", { children: "Remember, any changes you make to the style sheet and template files will be not available if you change themes. If you want them carried over, you will need to copy and paste them into the new Theme folder." }), _jsx("p", { children: "As a last element in the content area and throughout your site, check the hypertext links. These are the links to external websites and/or internal pages within your site. They come in three flavors: active, visited, and hover. Make sure you work on the styles for each of these." }), _jsx("h1", { children: "Typography test page with a very long H1 element so that we can test line height" }), _jsxs("p", { children: ["This page demonstrates the various typographic styles that are available within WordPress editor fields. As you can probably see, this is a basic paragraph of text. Within it you can include hyperlinks to other pages. When doing so, the link text should always be descriptive of the page that you are linking to. For example, visit the\u201A", _jsx("a", { href: "http://www.google.com", rel: "noopener noreferrer", target: "_blank", children: "Google homepage" }), "is a much better way of linking than this; to visit the Google homepage,", _jsx("a", { href: "http://www.google.com", rel: "noopener noreferrer", target: "_blank", children: "click here" }), ". When creating hyperlinks it\u2019s best practice to open links to external websites (offsite links) in a new window/tab thus allowing the user to still have this website open in their browser when they have finished with the external website."] }), _jsx("p", { children: "Some more text here." }), _jsx("h2", { children: "Heading 2 \u2013 Similarly, this will probably push to two lines as well" }), _jsx("p", { children: "Headings are used to separate blocks of text by level of importance. By default a page title in WordPress is always set in Heading 1 because it is the most important heading on the page. A page\u2019s H1 is an important factor for \u2018on page\u2019 SEO. You can see that this paragraph is prefaced with a Heading 2 \u2013 the second level of heading importance." }), _jsx("p", { children: "Now let\u2019s add a horizontal line below this paragraph to check that they are working." }), _jsx("hr", {}), _jsx("p", { children: "Gosh, we\u2019re at a level 4 Heading already. That means that this paragraph should only contain text that is supportive of the main content as opposed to being of high significance to it." })] }));
|
|
4
|
-
}
|