@astryxdesign/cli 0.0.15 → 0.1.0-canary.0b5b49f

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.
@@ -4,14 +4,14 @@
4
4
 
5
5
  import {useState, useMemo} from 'react';
6
6
  import * as stylex from '@stylexjs/stylex';
7
- import {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';
8
7
 
9
8
  import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
10
9
  import {ResizeHandle, useResizable} from '@astryxdesign/core/Resizable';
11
10
  import {Text, Heading} from '@astryxdesign/core/Text';
12
11
  import {CodeBlock} from '@astryxdesign/core/CodeBlock';
13
12
  import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
14
- import {Stack} from '@astryxdesign/core/Layout';
13
+ import {Stack, StackItem} from '@astryxdesign/core/Layout';
14
+ import {useMediaQuery} from '@astryxdesign/core/hooks';
15
15
  import {TabList, Tab} from '@astryxdesign/core/TabList';
16
16
  import {
17
17
  SegmentedControl,
@@ -27,29 +27,14 @@ import type {TreeListItemData} from '@astryxdesign/core/TreeList';
27
27
  import {
28
28
  FolderIcon,
29
29
  DocumentTextIcon,
30
- CodeBracketIcon,
31
30
  MagnifyingGlassIcon,
32
- CommandLineIcon,
33
- ExclamationTriangleIcon,
34
- InformationCircleIcon,
35
- BugAntIcon,
36
- HomeIcon,
37
- FolderOpenIcon,
38
- PuzzlePieceIcon,
39
31
  } from '@heroicons/react/24/outline';
40
- import {
41
- HomeIcon as HomeIconSolid,
42
- FolderOpenIcon as FolderOpenSolid,
43
- MagnifyingGlassIcon as MagnifyingGlassSolid,
44
- PuzzlePieceIcon as PuzzlePieceSolid,
45
- } from '@heroicons/react/24/solid';
46
32
 
47
33
  const styles = stylex.create({
48
34
  contentFill: {
49
35
  height: '100%',
50
36
  },
51
37
  terminalWrapper: {
52
- flex: 1,
53
38
  minHeight: 0,
54
39
  overflow: 'hidden',
55
40
  display: 'grid',
@@ -69,27 +54,26 @@ const styles = stylex.create({
69
54
  flexShrink: 0,
70
55
  },
71
56
  editorArea: {
72
- flex: 1,
73
57
  overflow: 'auto',
58
+ minHeight: 0,
74
59
  },
75
60
  fileExplorer: {
76
61
  padding: 16,
62
+ minWidth: 0,
77
63
  },
78
- terminalArea: {
64
+ propertiesPanel: {
79
65
  height: '100%',
80
- overflow: 'hidden',
81
66
  },
82
- hideOnMobile: {
83
- display: {
84
- default: 'contents',
85
- '@media (max-width: 768px)': 'none',
86
- },
67
+ propertiesContent: {
68
+ flex: 1,
69
+ minHeight: 0,
87
70
  },
88
- hideSideNav: {
89
- display: {
90
- default: 'flex',
91
- '@media (max-width: 768px)': 'none',
92
- },
71
+ propertyActions: {
72
+ marginTop: 'auto',
73
+ },
74
+ terminalArea: {
75
+ height: '100%',
76
+ overflow: 'hidden',
93
77
  },
94
78
  });
95
79
 
@@ -151,22 +135,23 @@ $ `;
151
135
  function buildFileTree(
152
136
  onFileClick: (name: string) => void,
153
137
  ): TreeListItemData[] {
138
+ const label = (text: string) => <Text maxLines={1}>{text}</Text>;
154
139
  const file = (id: string): TreeListItemData => ({
155
140
  id,
156
- label: id,
141
+ label: label(id),
157
142
  startContent: <Icon icon={DocumentTextIcon} size="xsm" />,
158
143
  onClick: () => onFileClick(id),
159
144
  });
160
145
  return [
161
146
  {
162
147
  id: 'src',
163
- label: 'src',
148
+ label: label('src'),
164
149
  startContent: <Icon icon={FolderIcon} size="xsm" />,
165
150
  isExpanded: true,
166
151
  children: [
167
152
  {
168
153
  id: 'components',
169
- label: 'components',
154
+ label: label('components'),
170
155
  startContent: <Icon icon={FolderIcon} size="xsm" />,
171
156
  isExpanded: true,
172
157
  children: [
@@ -177,14 +162,14 @@ function buildFileTree(
177
162
  },
178
163
  {
179
164
  id: 'pages',
180
- label: 'pages',
165
+ label: label('pages'),
181
166
  startContent: <Icon icon={FolderIcon} size="xsm" />,
182
167
  isExpanded: true,
183
168
  children: [file('index.tsx'), file('about.tsx')],
184
169
  },
185
170
  {
186
171
  id: 'styles',
187
- label: 'styles',
172
+ label: label('styles'),
188
173
  startContent: <Icon icon={FolderIcon} size="xsm" />,
189
174
  isExpanded: true,
190
175
  children: [file('tokens.stylex.ts'), file('theme.ts')],
@@ -216,7 +201,6 @@ const HISTORY_ITEMS = [
216
201
 
217
202
  export default function ResizableWorkspacePage() {
218
203
  const [activeFile, setActiveFile] = useState('Counter.tsx');
219
- const [activeNavItem, setActiveNavItem] = useState('Explorer');
220
204
  const [activeTermTab, setActiveTermTab] = useState('terminal');
221
205
  const [activePropertiesTab, setActivePropertiesTab] = useState('properties');
222
206
  const fileTree = useMemo(() => buildFileTree(setActiveFile), []);
@@ -245,89 +229,48 @@ export default function ResizableWorkspacePage() {
245
229
  collapsedSize: 40,
246
230
  });
247
231
 
232
+ const isMobile = useMediaQuery('(max-width: 768px)');
233
+
248
234
  return (
249
235
  <Layout
250
236
  height="fill"
251
- start={
252
- <LayoutPanel hasDivider={false} padding={0}>
253
- <SideNav
254
- collapsible={{defaultIsCollapsed: true}}
255
- resizable
256
- xstyle={styles.hideSideNav}>
257
- <SideNavSection title="Navigation" isHeaderHidden>
258
- <SideNavItem
259
- label="Home"
260
- icon={HomeIcon}
261
- selectedIcon={HomeIconSolid}
262
- isSelected={activeNavItem === 'Home'}
263
- onClick={() => setActiveNavItem('Home')}
264
- />
265
- <SideNavItem
266
- label="Explorer"
267
- icon={FolderOpenIcon}
268
- selectedIcon={FolderOpenSolid}
269
- isSelected={activeNavItem === 'Explorer'}
270
- onClick={() => setActiveNavItem('Explorer')}
271
- />
272
- <SideNavItem
273
- label="Search"
274
- icon={MagnifyingGlassIcon}
275
- selectedIcon={MagnifyingGlassSolid}
276
- isSelected={activeNavItem === 'Search'}
277
- onClick={() => setActiveNavItem('Search')}
278
- />
279
- <SideNavItem
280
- label="Source Control"
281
- icon={CodeBracketIcon}
282
- isSelected={activeNavItem === 'Source Control'}
283
- onClick={() => setActiveNavItem('Source Control')}
284
- />
285
- <SideNavItem
286
- label="Extensions"
287
- icon={PuzzlePieceIcon}
288
- selectedIcon={PuzzlePieceSolid}
289
- isSelected={activeNavItem === 'Extensions'}
290
- onClick={() => setActiveNavItem('Extensions')}
291
- />
292
- </SideNavSection>
293
- </SideNav>
294
- </LayoutPanel>
295
- }
296
237
  content={
297
238
  <LayoutContent padding={0}>
298
239
  <Layout
299
240
  height="fill"
300
241
  start={
301
- <div {...stylex.props(styles.hideOnMobile)}>
302
- {!startPanel.isCollapsed && (
303
- <LayoutPanel
304
- width={startPanel.size}
305
- hasDivider={false}
306
- padding={0}>
307
- <Stack
308
- direction="vertical"
309
- xstyle={styles.fileExplorer}
310
- gap={2}>
311
- <TextInput
312
- label="Search files"
313
- isLabelHidden
314
- value=""
315
- placeholder="Search"
316
- size="md"
317
- startIcon={MagnifyingGlassIcon}
318
- />
319
- <TreeList items={fileTree} density="compact" />
320
- </Stack>
321
- </LayoutPanel>
322
- )}
323
- <ResizeHandle
324
- direction="horizontal"
325
- hasDivider
326
- isAlwaysVisible={false}
327
- resizable={startPanel.props}
328
- label="Resize file explorer"
329
- />
330
- </div>
242
+ isMobile ? undefined : (
243
+ <>
244
+ {!startPanel.isCollapsed && (
245
+ <LayoutPanel
246
+ width={startPanel.size}
247
+ hasDivider={false}
248
+ padding={0}>
249
+ <Stack
250
+ direction="vertical"
251
+ xstyle={styles.fileExplorer}
252
+ gap={2}>
253
+ <TextInput
254
+ label="Search files"
255
+ isLabelHidden
256
+ value=""
257
+ placeholder="Search"
258
+ size="md"
259
+ startIcon={MagnifyingGlassIcon}
260
+ />
261
+ <TreeList items={fileTree} density="compact" />
262
+ </Stack>
263
+ </LayoutPanel>
264
+ )}
265
+ <ResizeHandle
266
+ direction="horizontal"
267
+ hasDivider
268
+ isAlwaysVisible={false}
269
+ resizable={startPanel.props}
270
+ label="Resize file explorer"
271
+ />
272
+ </>
273
+ )
331
274
  }
332
275
  content={
333
276
  <LayoutContent padding={0}>
@@ -335,13 +278,13 @@ export default function ResizableWorkspacePage() {
335
278
  height="fill"
336
279
  content={
337
280
  <LayoutContent padding={0}>
338
- <Stack
339
- direction="vertical"
340
- xstyle={styles.contentFill}>
341
- <div {...stylex.props(styles.editorArea)}>
281
+ <Stack direction="vertical" xstyle={styles.contentFill}>
282
+ <StackItem size="fill" xstyle={styles.editorArea}>
342
283
  <CodeBlock
343
284
  code={EDITOR_CODE}
344
285
  language="typescript"
286
+ container="section"
287
+ hasLanguageLabel={false}
345
288
  hasLineNumbers
346
289
  highlightLines={[21]}
347
290
  hasCopyButton={false}
@@ -353,7 +296,7 @@ export default function ResizableWorkspacePage() {
353
296
  borderRadius: 0,
354
297
  }}
355
298
  />
356
- </div>
299
+ </StackItem>
357
300
  <ResizeHandle
358
301
  direction="vertical"
359
302
  hasDivider
@@ -378,43 +321,19 @@ export default function ResizableWorkspacePage() {
378
321
  size="sm"
379
322
  hasDivider={false}
380
323
  xstyle={styles.tabListPadding}>
381
- <Tab
382
- label="Terminal"
383
- value="terminal"
384
- icon={
385
- <Icon icon={CommandLineIcon} size="sm" />
386
- }
387
- />
388
- <Tab
389
- label="Problems"
390
- value="problems"
391
- icon={
392
- <Icon
393
- icon={ExclamationTriangleIcon}
394
- size="sm"
395
- />
396
- }
397
- />
398
- <Tab
399
- label="Output"
400
- value="output"
401
- icon={
402
- <Icon
403
- icon={InformationCircleIcon}
404
- size="sm"
405
- />
406
- }
407
- />
408
- <Tab
409
- label="Debug"
410
- value="debug"
411
- icon={<Icon icon={BugAntIcon} size="sm" />}
412
- />
324
+ <Tab label="Terminal" value="terminal" />
325
+ <Tab label="Problems" value="problems" />
326
+ <Tab label="Output" value="output" />
327
+ <Tab label="Debug" value="debug" />
413
328
  </TabList>
414
- <div {...stylex.props(styles.terminalWrapper)}>
329
+ <StackItem
330
+ size="fill"
331
+ xstyle={styles.terminalWrapper}>
415
332
  <CodeBlock
416
333
  code={TERMINAL_OUTPUT}
417
334
  language="bash"
335
+ container="section"
336
+ hasLanguageLabel={false}
418
337
  hasCopyButton={false}
419
338
  size="sm"
420
339
  style={{
@@ -424,7 +343,7 @@ export default function ResizableWorkspacePage() {
424
343
  borderRadius: 0,
425
344
  }}
426
345
  />
427
- </div>
346
+ </StackItem>
428
347
  </Stack>
429
348
  </div>
430
349
  )}
@@ -432,106 +351,118 @@ export default function ResizableWorkspacePage() {
432
351
  </LayoutContent>
433
352
  }
434
353
  end={
435
- <div {...stylex.props(styles.hideOnMobile)}>
436
- <ResizeHandle
437
- direction="horizontal"
438
- hasDivider
439
- isReversed
440
- isAlwaysVisible={false}
441
- resizable={endPanel.props}
442
- label="Resize properties panel"
443
- />
444
- {!endPanel.isCollapsed && (
445
- <LayoutPanel
446
- width={endPanel.size}
447
- hasDivider={false}
448
- padding={4}>
449
- <Stack direction="vertical" gap={3}>
450
- <SegmentedControl
451
- label="Properties panel sections"
452
- value={activePropertiesTab}
453
- onChange={setActivePropertiesTab}
454
- size="sm"
455
- layout="fill">
456
- <SegmentedControlItem
457
- label="Properties"
458
- value="properties"
459
- />
460
- <SegmentedControlItem
461
- label="History"
462
- value="history"
463
- />
464
- </SegmentedControl>
465
- {activePropertiesTab === 'properties' ? (
466
- <>
467
- <Stack direction="vertical" gap={1}>
468
- <Heading level={3}>
469
- {activeFile}
470
- </Heading>
471
- <Text color="secondary" type="supporting">
472
- src/components/{activeFile}
473
- </Text>
474
- </Stack>
475
- <MetadataList
476
- xstyle={styles.metadataCompact}>
477
- {PROPERTIES.map(prop => (
478
- <MetadataListItem
479
- key={prop.label}
480
- label={prop.label}>
481
- {prop.value}
482
- </MetadataListItem>
483
- ))}
484
- </MetadataList>
485
- <Stack direction="vertical" gap={2}>
486
- <Stack direction="vertical" gap={2}>
354
+ isMobile ? undefined : (
355
+ <>
356
+ <ResizeHandle
357
+ direction="horizontal"
358
+ hasDivider
359
+ isReversed
360
+ isAlwaysVisible={false}
361
+ resizable={endPanel.props}
362
+ label="Resize properties panel"
363
+ />
364
+ {!endPanel.isCollapsed && (
365
+ <LayoutPanel
366
+ width={endPanel.size}
367
+ hasDivider={false}
368
+ padding={4}>
369
+ <Stack
370
+ direction="vertical"
371
+ gap={3}
372
+ xstyle={styles.propertiesPanel}>
373
+ <SegmentedControl
374
+ label="Properties panel sections"
375
+ value={activePropertiesTab}
376
+ onChange={setActivePropertiesTab}
377
+ size="sm"
378
+ layout="fill">
379
+ <SegmentedControlItem
380
+ label="Properties"
381
+ value="properties"
382
+ />
383
+ <SegmentedControlItem
384
+ label="History"
385
+ value="history"
386
+ />
387
+ </SegmentedControl>
388
+ {activePropertiesTab === 'properties' ? (
389
+ <Stack
390
+ direction="vertical"
391
+ gap={3}
392
+ xstyle={styles.propertiesContent}>
393
+ <Stack direction="vertical" gap={1}>
394
+ <Heading level={3} maxLines={1}>
395
+ {activeFile}
396
+ </Heading>
397
+ <Text
398
+ color="secondary"
399
+ type="supporting"
400
+ maxLines={1}>
401
+ src/components/{activeFile}
402
+ </Text>
403
+ </Stack>
404
+ <MetadataList xstyle={styles.metadataCompact}>
405
+ {PROPERTIES.map(prop => (
406
+ <MetadataListItem
407
+ key={prop.label}
408
+ label={prop.label}>
409
+ {prop.value}
410
+ </MetadataListItem>
411
+ ))}
412
+ </MetadataList>
413
+ <Stack
414
+ direction="vertical"
415
+ gap={2}
416
+ xstyle={styles.propertyActions}>
487
417
  <Button
488
418
  label="Format Document"
489
- size="md"
419
+ size="sm"
490
420
  variant="secondary"
491
421
  />
492
422
  <Button
493
423
  label="Go to Definition"
494
- size="md"
424
+ size="sm"
495
425
  variant="secondary"
496
426
  />
497
427
  <Button
498
428
  label="Find References"
499
- size="md"
429
+ size="sm"
500
430
  variant="secondary"
501
431
  />
502
432
  </Stack>
503
433
  </Stack>
504
- </>
505
- ) : (
506
- <Stack direction="vertical" gap={1}>
507
- <List>
508
- {HISTORY_ITEMS.map(item => (
509
- <ListItem
510
- key={item.label}
511
- label={item.label}
512
- endContent={
513
- <Text
514
- type="supporting"
515
- color="secondary">
516
- {item.time}
517
- </Text>
518
- }
519
- startContent={
520
- <span
521
- {...stylex.props(
522
- styles.historyTimelineDot,
523
- )}
524
- />
525
- }
526
- />
527
- ))}
528
- </List>
529
- </Stack>
530
- )}
531
- </Stack>
532
- </LayoutPanel>
533
- )}
534
- </div>
434
+ ) : (
435
+ <Stack direction="vertical" gap={1}>
436
+ <List>
437
+ {HISTORY_ITEMS.map(item => (
438
+ <ListItem
439
+ key={item.label}
440
+ label={item.label}
441
+ endContent={
442
+ <Text
443
+ type="supporting"
444
+ color="secondary"
445
+ maxLines={1}>
446
+ {item.time}
447
+ </Text>
448
+ }
449
+ startContent={
450
+ <span
451
+ {...stylex.props(
452
+ styles.historyTimelineDot,
453
+ )}
454
+ />
455
+ }
456
+ />
457
+ ))}
458
+ </List>
459
+ </Stack>
460
+ )}
461
+ </Stack>
462
+ </LayoutPanel>
463
+ )}
464
+ </>
465
+ )
535
466
  }
536
467
  />
537
468
  </LayoutContent>