@astryxdesign/cli 0.4.5-canary.0472ec1 → 0.4.5-canary.0dfce02
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/assets/templates/blocks/components/AvatarGroup/AvatarGroupInteractive.doc.mjs +15 -0
- package/assets/templates/blocks/components/AvatarGroup/AvatarGroupInteractive.tsx +47 -0
- package/assets/templates/blocks/components/AvatarGroup/AvatarGroupShowcase.doc.mjs +1 -1
- package/assets/templates/blocks/components/Breadcrumbs/BreadcrumbsCustomSeparator.tsx +18 -5
- package/package.json +9 -9
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
|
|
4
|
+
export const doc = {
|
|
5
|
+
type: 'block',
|
|
6
|
+
exampleFor: 'AvatarGroup',
|
|
7
|
+
name: 'AvatarGroup — Interactive',
|
|
8
|
+
displayName: 'Avatar Group — Interactive',
|
|
9
|
+
description:
|
|
10
|
+
'A facepile whose avatars link to profiles, with an overflow indicator that opens the full member list. The whole group is one Tab stop; arrow keys move between the avatars and the overflow button.',
|
|
11
|
+
isReady: true,
|
|
12
|
+
isShowcase: false,
|
|
13
|
+
aspectRatio: 16 / 9,
|
|
14
|
+
componentsUsed: ['AvatarGroup', 'Avatar', 'Layout', 'Text'],
|
|
15
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
import {AvatarGroup, AvatarGroupOverflow} from '@astryxdesign/core/AvatarGroup';
|
|
5
|
+
import {Avatar} from '@astryxdesign/core/Avatar';
|
|
6
|
+
import {Stack} from '@astryxdesign/core/Layout';
|
|
7
|
+
import {Text} from '@astryxdesign/core/Text';
|
|
8
|
+
|
|
9
|
+
const MEMBERS = [
|
|
10
|
+
{name: 'Alex Daniels', key: 'alex', href: '/team/alex'},
|
|
11
|
+
{name: 'Ann Smith', key: 'ann', href: '/team/ann'},
|
|
12
|
+
{name: 'Carol Davis', key: 'carol', href: '/team/carol'},
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
const TOTAL_MEMBERS = 18;
|
|
16
|
+
|
|
17
|
+
export default function AvatarGroupInteractive() {
|
|
18
|
+
return (
|
|
19
|
+
<Stack direction="vertical" gap={8}>
|
|
20
|
+
<Stack direction="vertical" gap={3}>
|
|
21
|
+
<Text type="supporting" color="secondary">
|
|
22
|
+
Reviewers
|
|
23
|
+
</Text>
|
|
24
|
+
<AvatarGroup size="lg" aria-label="Reviewers">
|
|
25
|
+
{MEMBERS.map(m => (
|
|
26
|
+
<Avatar key={m.key} name={m.name} href={m.href} />
|
|
27
|
+
))}
|
|
28
|
+
<AvatarGroupOverflow
|
|
29
|
+
count={TOTAL_MEMBERS - MEMBERS.length}
|
|
30
|
+
onClick={() => {}}
|
|
31
|
+
/>
|
|
32
|
+
</AvatarGroup>
|
|
33
|
+
</Stack>
|
|
34
|
+
<Stack direction="vertical" gap={3}>
|
|
35
|
+
<Text type="supporting" color="secondary">
|
|
36
|
+
Compact, static
|
|
37
|
+
</Text>
|
|
38
|
+
<AvatarGroup size="sm" aria-label="Attendees">
|
|
39
|
+
{MEMBERS.map(m => (
|
|
40
|
+
<Avatar key={m.key} name={m.name} />
|
|
41
|
+
))}
|
|
42
|
+
<AvatarGroupOverflow count={TOTAL_MEMBERS - MEMBERS.length} />
|
|
43
|
+
</AvatarGroup>
|
|
44
|
+
</Stack>
|
|
45
|
+
</Stack>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
@@ -6,7 +6,7 @@ export const doc = {
|
|
|
6
6
|
name: 'AvatarGroup',
|
|
7
7
|
displayName: 'Avatar Group',
|
|
8
8
|
description:
|
|
9
|
-
'Overlapping avatar rows with
|
|
9
|
+
'Overlapping avatar rows with a sliced visible set and a server-side overflow count. Shows team members in a compact facepile layout.',
|
|
10
10
|
isReady: true,
|
|
11
11
|
isShowcase: true,
|
|
12
12
|
aspectRatio: 16 / 9,
|
|
@@ -2,25 +2,38 @@
|
|
|
2
2
|
|
|
3
3
|
'use client';
|
|
4
4
|
|
|
5
|
+
import * as stylex from '@stylexjs/stylex';
|
|
5
6
|
import {Breadcrumbs, BreadcrumbItem} from '@astryxdesign/core/Breadcrumbs';
|
|
6
7
|
import {Stack} from '@astryxdesign/core/Layout';
|
|
7
8
|
import {Text} from '@astryxdesign/core/Text';
|
|
9
|
+
import {rtlStyles} from '@astryxdesign/core/utils';
|
|
8
10
|
|
|
11
|
+
// Only a glyph the bidi algorithm does not already flip needs rtlStyles.mirror.
|
|
12
|
+
// U+203A has Unicode Bidi_Mirrored=Yes, so the browser mirrors it under RTL on
|
|
13
|
+
// its own and a second flip would point it back the wrong way; U+2192 has
|
|
14
|
+
// Bidi_Mirrored=No and stays pointing left-to-right unless we mirror it.
|
|
9
15
|
const SEPARATORS = [
|
|
10
|
-
{char: '›', label: 'Chevron'},
|
|
11
|
-
{char: '→', label: 'Arrow'},
|
|
12
|
-
{char: '·', label: 'Dot'},
|
|
16
|
+
{char: '›', label: 'Chevron', needsRtlMirror: false},
|
|
17
|
+
{char: '→', label: 'Arrow', needsRtlMirror: true},
|
|
18
|
+
{char: '·', label: 'Dot', needsRtlMirror: false},
|
|
13
19
|
];
|
|
14
20
|
|
|
15
21
|
export default function BreadcrumbsCustomSeparator() {
|
|
16
22
|
return (
|
|
17
23
|
<Stack direction="vertical" gap={4}>
|
|
18
|
-
{SEPARATORS.map(({char, label}) => (
|
|
24
|
+
{SEPARATORS.map(({char, label, needsRtlMirror}) => (
|
|
19
25
|
<Stack key={label} direction="vertical" gap={1}>
|
|
20
26
|
<Text type="supporting" color="secondary">
|
|
21
27
|
{label}
|
|
22
28
|
</Text>
|
|
23
|
-
<Breadcrumbs
|
|
29
|
+
<Breadcrumbs
|
|
30
|
+
separator={
|
|
31
|
+
needsRtlMirror ? (
|
|
32
|
+
<span {...stylex.props(rtlStyles.mirror)}>{char}</span>
|
|
33
|
+
) : (
|
|
34
|
+
char
|
|
35
|
+
)
|
|
36
|
+
}>
|
|
24
37
|
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
|
25
38
|
<BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
|
|
26
39
|
<BreadcrumbItem isCurrent>API Reference</BreadcrumbItem>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/cli",
|
|
3
|
-
"version": "0.4.5-canary.
|
|
3
|
+
"version": "0.4.5-canary.0dfce02",
|
|
4
4
|
"displayName": "CLI",
|
|
5
5
|
"description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -87,10 +87,10 @@
|
|
|
87
87
|
"zod": "^4.4.3"
|
|
88
88
|
},
|
|
89
89
|
"peerDependencies": {
|
|
90
|
-
"@astryxdesign/charts": "0.4.5-canary.
|
|
91
|
-
"@astryxdesign/core": "0.4.5-canary.
|
|
92
|
-
"@astryxdesign/lab": "0.4.5-canary.
|
|
93
|
-
"@astryxdesign/theme-neutral": "0.4.5-canary.
|
|
90
|
+
"@astryxdesign/charts": "0.4.5-canary.0dfce02",
|
|
91
|
+
"@astryxdesign/core": "0.4.5-canary.0dfce02",
|
|
92
|
+
"@astryxdesign/lab": "0.4.5-canary.0dfce02",
|
|
93
|
+
"@astryxdesign/theme-neutral": "0.4.5-canary.0dfce02",
|
|
94
94
|
"gpt-tokenizer": "^3.4.0"
|
|
95
95
|
},
|
|
96
96
|
"peerDependenciesMeta": {
|
|
@@ -108,10 +108,10 @@
|
|
|
108
108
|
}
|
|
109
109
|
},
|
|
110
110
|
"devDependencies": {
|
|
111
|
-
"@astryxdesign/charts": "0.4.5-canary.
|
|
112
|
-
"@astryxdesign/core": "0.4.5-canary.
|
|
113
|
-
"@astryxdesign/lab": "0.4.5-canary.
|
|
114
|
-
"@astryxdesign/theme-neutral": "0.4.5-canary.
|
|
111
|
+
"@astryxdesign/charts": "0.4.5-canary.0dfce02",
|
|
112
|
+
"@astryxdesign/core": "0.4.5-canary.0dfce02",
|
|
113
|
+
"@astryxdesign/lab": "0.4.5-canary.0dfce02",
|
|
114
|
+
"@astryxdesign/theme-neutral": "0.4.5-canary.0dfce02",
|
|
115
115
|
"gpt-tokenizer": "^3.4.0"
|
|
116
116
|
},
|
|
117
117
|
"scripts": {
|