Skip to content

Commit d6c3fac

Browse files
Mahmoud-zinoMahmoud-zino
Mahmoud-zino
and
Mahmoud-zino
authored
next appbar v3 conventions (#2713)
Co-authored-by: Mahmoud-zino <[email protected]>
1 parent 4a3243f commit d6c3fac

File tree

9 files changed

+189
-194
lines changed

9 files changed

+189
-194
lines changed

‎packages/skeleton-react/src/lib/components/AppBar/AppBar.tsx

+12-17
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
"use client";
2-
31
import React from "react";
42
import {
5-
AppBarCenterProps,
3+
ToolbarCenterProps,
64
AppBarHeadlineProps,
7-
AppBarLeadProps,
5+
ToolbarLeadProps,
86
AppBarProps,
9-
AppBarToolBarProps,
10-
AppBarTrailProps,
7+
ToolBarProps,
8+
ToolbarTrailProps,
119
} from "./types.js";
1210

1311
// React Compose ---
@@ -37,7 +35,7 @@ const AppBarRoot: React.FC<AppBarProps> = ({
3735
);
3836
};
3937

40-
const AppBarToolBarRoot: React.FC<AppBarToolBarProps> = ({
38+
const Toolbar: React.FC<ToolBarProps> = ({
4139
// Toolbar
4240
base = "flex justify-between",
4341
gridCols = "grid-cols-[auto_1fr_auto]",
@@ -51,7 +49,7 @@ const AppBarToolBarRoot: React.FC<AppBarToolBarProps> = ({
5149
);
5250
};
5351

54-
const AppBarLead: React.FC<AppBarLeadProps> = ({
52+
const ToolbarLead: React.FC<ToolbarLeadProps> = ({
5553
// Lead
5654
base = "flex",
5755
spaceX = "space-x-4 rtl:space-x-reverse",
@@ -65,7 +63,7 @@ const AppBarLead: React.FC<AppBarLeadProps> = ({
6563
);
6664
};
6765

68-
const AppBarCenter: React.FC<AppBarCenterProps> = ({
66+
const ToolbarCenter: React.FC<ToolbarCenterProps> = ({
6967
// Center
7068
base = "grow",
7169
align = "text-center",
@@ -79,7 +77,7 @@ const AppBarCenter: React.FC<AppBarCenterProps> = ({
7977
);
8078
};
8179

82-
const AppBarTrail: React.FC<AppBarTrailProps> = ({
80+
const ToolbarTrail: React.FC<ToolbarTrailProps> = ({
8381
// Trail
8482
base = "flex",
8583
spaceX = "space-x-4 rtl:space-x-reverse",
@@ -103,13 +101,10 @@ const AppBarHeadline: React.FC<AppBarHeadlineProps> = ({
103101
return <div className={`${base} ${classes}`}>{children}</div>;
104102
};
105103

106-
export const ToolBar = reactCompose(AppBarToolBarRoot, {
107-
Lead: AppBarLead,
108-
Center: AppBarCenter,
109-
Trail: AppBarTrail,
110-
});
111-
112104
export const AppBar = reactCompose(AppBarRoot, {
113-
Toolbar: ToolBar,
105+
Toolbar: Toolbar,
106+
ToolbarLead: ToolbarLead,
107+
ToolbarCenter: ToolbarCenter,
108+
ToolbarTrail: ToolbarTrail,
114109
Headline: AppBarHeadline,
115110
});

‎packages/skeleton-react/src/lib/components/AppBar/schema.json

+124-124
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,6 @@
11
{
22
"$schema": "http://json-schema.org/draft-07/schema#",
33
"definitions": {
4-
"AppBarCenterProps": {
5-
"properties": {
6-
"align": {
7-
"description": "Sets the center component's alignment styles.",
8-
"type": "string"
9-
},
10-
"base": {
11-
"description": "Sets the center component's base styles.",
12-
"type": "string"
13-
},
14-
"children": {
15-
"$ref": "#/definitions/React.ReactNode"
16-
},
17-
"classes": {
18-
"description": "Provide arbitrary CSS classes to the center component.",
19-
"type": "string"
20-
},
21-
"padding": {
22-
"description": "Sets the center component's padding styles.",
23-
"type": "string"
24-
}
25-
},
26-
"propertyOrder": [
27-
"base",
28-
"align",
29-
"padding",
30-
"classes",
31-
"children"
32-
],
33-
"type": "object"
34-
},
354
"AppBarHeadlineProps": {
365
"properties": {
376
"base": {
@@ -53,37 +22,6 @@
5322
],
5423
"type": "object"
5524
},
56-
"AppBarLeadProps": {
57-
"properties": {
58-
"base": {
59-
"description": "Sets the lead component's base styles.",
60-
"type": "string"
61-
},
62-
"children": {
63-
"$ref": "#/definitions/React.ReactNode"
64-
},
65-
"classes": {
66-
"description": "Provide arbitrary CSS classes to the lead component.",
67-
"type": "string"
68-
},
69-
"padding": {
70-
"description": "Sets the lead component's padding styles.",
71-
"type": "string"
72-
},
73-
"spaceX": {
74-
"description": "Sets the lead component's horizontal spacing styles.",
75-
"type": "string"
76-
}
77-
},
78-
"propertyOrder": [
79-
"base",
80-
"spaceX",
81-
"padding",
82-
"classes",
83-
"children"
84-
],
85-
"type": "object"
86-
},
8725
"AppBarProps": {
8826
"properties": {
8927
"background": {
@@ -130,68 +68,6 @@
13068
],
13169
"type": "object"
13270
},
133-
"AppBarToolBarProps": {
134-
"properties": {
135-
"base": {
136-
"description": "Sets the toolbar component's base styles.",
137-
"type": "string"
138-
},
139-
"children": {
140-
"$ref": "#/definitions/React.ReactNode"
141-
},
142-
"classes": {
143-
"description": "Provide arbitrary CSS classes to the toolbar component.",
144-
"type": "string"
145-
},
146-
"gap": {
147-
"description": "Sets the toolbar component's gap styles.",
148-
"type": "string"
149-
},
150-
"gridCols": {
151-
"description": "Sets the toolbar component's grid columns styles.",
152-
"type": "string"
153-
}
154-
},
155-
"propertyOrder": [
156-
"base",
157-
"gridCols",
158-
"gap",
159-
"classes",
160-
"children"
161-
],
162-
"type": "object"
163-
},
164-
"AppBarTrailProps": {
165-
"properties": {
166-
"base": {
167-
"description": "Sets the trail component's base styles.",
168-
"type": "string"
169-
},
170-
"children": {
171-
"$ref": "#/definitions/React.ReactNode"
172-
},
173-
"classes": {
174-
"description": "Provide arbitrary CSS classes to the trail component.",
175-
"type": "string"
176-
},
177-
"padding": {
178-
"description": "Sets the trail component's padding styles.",
179-
"type": "string"
180-
},
181-
"spaceX": {
182-
"description": "Sets the trail component's horizontal spacing styles.",
183-
"type": "string"
184-
}
185-
},
186-
"propertyOrder": [
187-
"base",
188-
"spaceX",
189-
"padding",
190-
"classes",
191-
"children"
192-
],
193-
"type": "object"
194-
},
19571
"Iterable<React.ReactNode>": {
19672
"propertyOrder": [
19773
"__@iterator@83"
@@ -298,6 +174,130 @@
298174
"type"
299175
],
300176
"type": "object"
177+
},
178+
"ToolBarProps": {
179+
"properties": {
180+
"base": {
181+
"description": "Sets the toolbar component's base styles.",
182+
"type": "string"
183+
},
184+
"children": {
185+
"$ref": "#/definitions/React.ReactNode"
186+
},
187+
"classes": {
188+
"description": "Provide arbitrary CSS classes to the toolbar component.",
189+
"type": "string"
190+
},
191+
"gap": {
192+
"description": "Sets the toolbar component's gap styles.",
193+
"type": "string"
194+
},
195+
"gridCols": {
196+
"description": "Sets the toolbar component's grid columns styles.",
197+
"type": "string"
198+
}
199+
},
200+
"propertyOrder": [
201+
"base",
202+
"gridCols",
203+
"gap",
204+
"classes",
205+
"children"
206+
],
207+
"type": "object"
208+
},
209+
"ToolbarCenterProps": {
210+
"properties": {
211+
"align": {
212+
"description": "Sets the center component's alignment styles.",
213+
"type": "string"
214+
},
215+
"base": {
216+
"description": "Sets the center component's base styles.",
217+
"type": "string"
218+
},
219+
"children": {
220+
"$ref": "#/definitions/React.ReactNode"
221+
},
222+
"classes": {
223+
"description": "Provide arbitrary CSS classes to the center component.",
224+
"type": "string"
225+
},
226+
"padding": {
227+
"description": "Sets the center component's padding styles.",
228+
"type": "string"
229+
}
230+
},
231+
"propertyOrder": [
232+
"base",
233+
"align",
234+
"padding",
235+
"classes",
236+
"children"
237+
],
238+
"type": "object"
239+
},
240+
"ToolbarLeadProps": {
241+
"properties": {
242+
"base": {
243+
"description": "Sets the lead component's base styles.",
244+
"type": "string"
245+
},
246+
"children": {
247+
"$ref": "#/definitions/React.ReactNode"
248+
},
249+
"classes": {
250+
"description": "Provide arbitrary CSS classes to the lead component.",
251+
"type": "string"
252+
},
253+
"padding": {
254+
"description": "Sets the lead component's padding styles.",
255+
"type": "string"
256+
},
257+
"spaceX": {
258+
"description": "Sets the lead component's horizontal spacing styles.",
259+
"type": "string"
260+
}
261+
},
262+
"propertyOrder": [
263+
"base",
264+
"spaceX",
265+
"padding",
266+
"classes",
267+
"children"
268+
],
269+
"type": "object"
270+
},
271+
"ToolbarTrailProps": {
272+
"properties": {
273+
"base": {
274+
"description": "Sets the trail component's base styles.",
275+
"type": "string"
276+
},
277+
"children": {
278+
"$ref": "#/definitions/React.ReactNode"
279+
},
280+
"classes": {
281+
"description": "Provide arbitrary CSS classes to the trail component.",
282+
"type": "string"
283+
},
284+
"padding": {
285+
"description": "Sets the trail component's padding styles.",
286+
"type": "string"
287+
},
288+
"spaceX": {
289+
"description": "Sets the trail component's horizontal spacing styles.",
290+
"type": "string"
291+
}
292+
},
293+
"propertyOrder": [
294+
"base",
295+
"spaceX",
296+
"padding",
297+
"classes",
298+
"children"
299+
],
300+
"type": "object"
301301
}
302302
}
303303
}

‎packages/skeleton-react/src/lib/components/AppBar/types.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export interface AppBarProps extends React.PropsWithChildren {
2020
classes?: string;
2121
}
2222

23-
export interface AppBarToolBarProps extends React.PropsWithChildren {
23+
export interface ToolBarProps extends React.PropsWithChildren {
2424
/** Sets the toolbar component's base styles. */
2525
base?: string;
2626
/** Sets the toolbar component's grid columns styles. */
@@ -31,7 +31,7 @@ export interface AppBarToolBarProps extends React.PropsWithChildren {
3131
classes?: string;
3232
}
3333

34-
export interface AppBarLeadProps extends React.PropsWithChildren {
34+
export interface ToolbarLeadProps extends React.PropsWithChildren {
3535
/** Sets the lead component's base styles. */
3636
base?: string;
3737
/** Sets the lead component's horizontal spacing styles. */
@@ -42,7 +42,7 @@ export interface AppBarLeadProps extends React.PropsWithChildren {
4242
classes?: string;
4343
}
4444

45-
export interface AppBarCenterProps extends React.PropsWithChildren {
45+
export interface ToolbarCenterProps extends React.PropsWithChildren {
4646
/** Sets the center component's base styles. */
4747
base?: string;
4848
/** Sets the center component's alignment styles. */
@@ -53,7 +53,7 @@ export interface AppBarCenterProps extends React.PropsWithChildren {
5353
classes?: string;
5454
}
5555

56-
export interface AppBarTrailProps extends React.PropsWithChildren {
56+
export interface ToolbarTrailProps extends React.PropsWithChildren {
5757
/** Sets the trail component's base styles. */
5858
base?: string;
5959
/** Sets the trail component's horizontal spacing styles. */

‎packages/skeleton-react/src/lib/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export { default as TestReact } from "./components/Test/Test.js";
33
// Components
44
export { Accordion } from "./components/Accordion/Accordion.js";
55
export { Avatar } from "./components/Avatar/Avatar.js";
6-
export { AppBar, ToolBar } from "./components/AppBar/AppBar.js";
6+
export { AppBar } from "./components/AppBar/AppBar.js";
77
export { Progress } from "./components/Progress/Progress.js";
88
export { Switch } from "./components/Switch/Switch.js";
99
export { Tabs } from "./components/Tabs/Tabs.js";

0 commit comments

Comments
 (0)