25 KiB
25 KiB
Page snapshot
- generic [ref=e3]:
- banner "Storybook" [ref=e6]:
- heading "Storybook" [level=1] [ref=e7]
- img
- generic [ref=e11]:
- generic [ref=e12]:
- generic [ref=e13]:
- link "Skip to content" [ref=e14] [cursor=pointer]:
- /url: "#storybook-preview-wrapper"
- link "Storybook" [ref=e16] [cursor=pointer]:
- /url: ./
- img "Storybook" [ref=e17]
- switch "Settings" [ref=e22] [cursor=pointer]:
- img [ref=e23]
- generic [ref=e28]:
- generic [ref=e30] [cursor=pointer]:
- button "Open onboarding guide" [ref=e34]:
- img [ref=e36]
- strong [ref=e38]: Get started
- generic [ref=e39]:
- button "Collapse onboarding checklist" [expanded] [ref=e40]:
- img [ref=e41]
- button "25% completed" [ref=e43]:
- generic [ref=e44]:
- img [ref=e45]
- img [ref=e47]
- generic [ref=e50]: 25%
- list [ref=e52]:
- listitem [ref=e53]:
- button "Open onboarding guide for See what's new" [ref=e54] [cursor=pointer]:
- img [ref=e56]
- generic [ref=e59]: See what's new
- button "Go"
- listitem [ref=e60]:
- button "Open onboarding guide for Change a story with Controls" [ref=e61] [cursor=pointer]:
- img [ref=e63]
- generic [ref=e66]: Change a story with Controls
- listitem [ref=e67]:
- button "Open onboarding guide for Install Vitest addon" [ref=e68] [cursor=pointer]:
- img [ref=e70]
- generic [ref=e73]: Install Vitest addon
- generic [ref=e74]: Search for components
- search [ref=e75]:
- combobox "Search for components" [ref=e76]:
- generic:
- img
- searchbox "Search for components" [ref=e77]
- code: ⌃ K
- button "Tag filters" [ref=e79] [cursor=pointer]:
- img [ref=e80]
- button "Create a new story" [ref=e82] [cursor=pointer]:
- img [ref=e83]
- navigation "Stories" [ref=e86]:
- heading "Stories" [level=2] [ref=e87]
- generic [ref=e89]:
- generic [ref=e90]:
- button "Collapse" [expanded] [ref=e91] [cursor=pointer]:
- img [ref=e93]
- text: Components
- button "Expand all" [ref=e95] [cursor=pointer]:
- img [ref=e96]
- button "Boxer" [ref=e99] [cursor=pointer]:
- generic [ref=e100]:
- img [ref=e102]
- img [ref=e104]
- text: Boxer
- button "Griddy" [expanded] [ref=e107] [cursor=pointer]:
- generic [ref=e108]:
- img [ref=e110]
- img [ref=e112]
- text: Griddy
- link "Basic" [ref=e115] [cursor=pointer]:
- /url: /?path=/story/components-griddy--basic
- img [ref=e117]
- text: Basic
- link "Large Dataset" [ref=e120] [cursor=pointer]:
- /url: /?path=/story/components-griddy--large-dataset
- img [ref=e122]
- text: Large Dataset
- link "Single Selection" [ref=e125] [cursor=pointer]:
- /url: /?path=/story/components-griddy--single-selection
- img [ref=e127]
- text: Single Selection
- link "Multi Selection" [ref=e130] [cursor=pointer]:
- /url: /?path=/story/components-griddy--multi-selection
- img [ref=e132]
- text: Multi Selection
- link "Large Multi Selection" [ref=e135] [cursor=pointer]:
- /url: /?path=/story/components-griddy--large-multi-selection
- img [ref=e137]
- text: Large Multi Selection
- link "With Search" [ref=e140] [cursor=pointer]:
- /url: /?path=/story/components-griddy--with-search
- img [ref=e142]
- text: With Search
- link "Keyboard Navigation" [ref=e145] [cursor=pointer]:
- /url: /?path=/story/components-griddy--keyboard-navigation
- img [ref=e147]
- text: Keyboard Navigation
- generic [ref=e149]:
- link "With Text Filtering" [ref=e150] [cursor=pointer]:
- /url: /?path=/story/components-griddy--with-text-filtering
- img [ref=e152]
- text: With Text Filtering
- link "Skip to content" [ref=e154] [cursor=pointer]:
- /url: "#storybook-preview-wrapper"
- link "With Number Filtering" [ref=e156] [cursor=pointer]:
- /url: /?path=/story/components-griddy--with-number-filtering
- img [ref=e158]
- text: With Number Filtering
- link "With Enum Filtering" [ref=e161] [cursor=pointer]:
- /url: /?path=/story/components-griddy--with-enum-filtering
- img [ref=e163]
- text: With Enum Filtering
- link "With Boolean Filtering" [ref=e166] [cursor=pointer]:
- /url: /?path=/story/components-griddy--with-boolean-filtering
- img [ref=e168]
- text: With Boolean Filtering
- link "With All Filter Types" [ref=e171] [cursor=pointer]:
- /url: /?path=/story/components-griddy--with-all-filter-types
- img [ref=e173]
- text: With All Filter Types
- link "Large Dataset With Filtering" [ref=e176] [cursor=pointer]:
- /url: /?path=/story/components-griddy--large-dataset-with-filtering
- img [ref=e178]
- text: Large Dataset With Filtering
- generic [ref=e180]:
- button "Collapse" [expanded] [ref=e181] [cursor=pointer]:
- img [ref=e183]
- text: Former
- button "Expand all" [ref=e185] [cursor=pointer]:
- img [ref=e186]
- button "Former Basic" [ref=e189] [cursor=pointer]:
- generic [ref=e190]:
- img [ref=e192]
- img [ref=e194]
- text: Former Basic
- button "Controls Basic" [ref=e197] [cursor=pointer]:
- generic [ref=e198]:
- img [ref=e200]
- img [ref=e202]
- text: Controls Basic
- generic [ref=e204]:
- button "Collapse" [expanded] [ref=e205] [cursor=pointer]:
- img [ref=e207]
- text: State
- button "Expand all" [ref=e209] [cursor=pointer]:
- img [ref=e210]
- button "GlobalStateStore" [ref=e213] [cursor=pointer]:
- generic [ref=e214]:
- img [ref=e216]
- img [ref=e218]
- text: GlobalStateStore
- generic [ref=e220]:
- button "Collapse" [expanded] [ref=e221] [cursor=pointer]:
- img [ref=e223]
- text: Grid
- button "Expand all" [ref=e225] [cursor=pointer]:
- img [ref=e226]
- button "Gridler API" [ref=e229] [cursor=pointer]:
- generic [ref=e230]:
- img [ref=e232]
- img [ref=e234]
- text: Gridler API
- button "Gridler Local" [ref=e237] [cursor=pointer]:
- generic [ref=e238]:
- img [ref=e240]
- img [ref=e242]
- text: Gridler Local
- generic [ref=e244]:
- button "Collapse" [expanded] [ref=e245] [cursor=pointer]:
- img [ref=e247]
- text: UI
- button "Expand all" [ref=e249] [cursor=pointer]:
- img [ref=e250]
- button "Mantine Better Menu" [ref=e253] [cursor=pointer]:
- generic [ref=e254]:
- img [ref=e256]
- img [ref=e258]
- text: Mantine Better Menu
- generic [ref=e261]:
- region "Toolbar" [ref=e262]:
- heading "Toolbar" [level=2] [ref=e263]
- toolbar [ref=e264]:
- generic [ref=e265]:
- button "Reload story" [ref=e266] [cursor=pointer]:
- img [ref=e267]
- switch "Grid visibility" [ref=e269] [cursor=pointer]:
- img [ref=e270]
- button "Preview background" [ref=e272] [cursor=pointer]:
- img [ref=e273]
- switch "Measure tool" [ref=e276] [cursor=pointer]:
- img [ref=e277]
- switch "Outline tool" [ref=e280] [cursor=pointer]:
- img [ref=e281]
- button "Viewport size" [ref=e283] [cursor=pointer]:
- img [ref=e284]
- generic [ref=e288]:
- switch "Change zoom level" [ref=e289] [cursor=pointer]: 100%
- button "Enter full screen" [ref=e290] [cursor=pointer]:
- img [ref=e291]
- button "Share" [ref=e293] [cursor=pointer]:
- img [ref=e294]
- button "Open in editor" [ref=e297] [cursor=pointer]:
- img [ref=e298]
- main "Main preview area" [ref=e301]:
- heading "Main preview area" [level=2] [ref=e302]
- generic [ref=e304]:
- link "Skip to sidebar" [ref=e305] [cursor=pointer]:
- /url: "#components-griddy--with-text-filtering"
- iframe [ref=e309]:
- generic [ref=f1e4]:
- grid "Data grid" [ref=f1e5]:
- generic [ref=f1e6]:
- rowgroup [ref=f1e7]:
- row "ID First Name Filter status indicator Last Name Filter status indicator Email Age Department Salary Start Date Active" [ref=f1e8]:
- columnheader "ID" [ref=f1e9] [cursor=pointer]:
- generic [ref=f1e11]: ID
- columnheader "First Name Filter status indicator" [ref=f1e13] [cursor=pointer]:
- generic [ref=f1e15]:
- text: First Name
- button "Filter status indicator" [disabled] [ref=f1e16]:
- img [ref=f1e18]
- columnheader "Last Name Filter status indicator" [ref=f1e21] [cursor=pointer]:
- generic [ref=f1e23]:
- text: Last Name
- button "Filter status indicator" [disabled] [ref=f1e24]:
- img [ref=f1e26]
- columnheader "Email" [ref=f1e29] [cursor=pointer]:
- generic [ref=f1e31]: Email
- columnheader "Age" [ref=f1e33] [cursor=pointer]:
- generic [ref=f1e35]: Age
- columnheader "Department" [ref=f1e37] [cursor=pointer]:
- generic [ref=f1e39]: Department
- columnheader "Salary" [ref=f1e41] [cursor=pointer]:
- generic [ref=f1e43]: Salary
- columnheader "Start Date" [ref=f1e45] [cursor=pointer]:
- generic [ref=f1e47]: Start Date
- columnheader "Active" [ref=f1e49] [cursor=pointer]:
- generic [ref=f1e51]: Active
- rowgroup [ref=f1e53]:
- row "1 Alice Smith alice.smith@example.com 22 Engineering $40,000 2020-01-01 No" [ref=f1e54]:
- gridcell "1" [ref=f1e55]
- gridcell "Alice" [ref=f1e56]
- gridcell "Smith" [ref=f1e57]
- gridcell "alice.smith@example.com" [ref=f1e58]
- gridcell "22" [ref=f1e59]
- gridcell "Engineering" [ref=f1e60]
- gridcell "$40,000" [ref=f1e61]
- gridcell "2020-01-01" [ref=f1e62]
- gridcell "No" [ref=f1e63]
- row "2 Bob Johnson bob.johnson@example.com 23 Marketing $41,234 2021-02-02 Yes" [ref=f1e64]:
- gridcell "2" [ref=f1e65]
- gridcell "Bob" [ref=f1e66]
- gridcell "Johnson" [ref=f1e67]
- gridcell "bob.johnson@example.com" [ref=f1e68]
- gridcell "23" [ref=f1e69]
- gridcell "Marketing" [ref=f1e70]
- gridcell "$41,234" [ref=f1e71]
- gridcell "2021-02-02" [ref=f1e72]
- gridcell "Yes" [ref=f1e73]
- row "3 Charlie Williams charlie.williams@example.com 24 Sales $42,468 2022-03-03 Yes" [ref=f1e74]:
- gridcell "3" [ref=f1e75]
- gridcell "Charlie" [ref=f1e76]
- gridcell "Williams" [ref=f1e77]
- gridcell "charlie.williams@example.com" [ref=f1e78]
- gridcell "24" [ref=f1e79]
- gridcell "Sales" [ref=f1e80]
- gridcell "$42,468" [ref=f1e81]
- gridcell "2022-03-03" [ref=f1e82]
- gridcell "Yes" [ref=f1e83]
- row "4 Diana Brown diana.brown@example.com 25 HR $43,702 2023-04-04 No" [ref=f1e84]:
- gridcell "4" [ref=f1e85]
- gridcell "Diana" [ref=f1e86]
- gridcell "Brown" [ref=f1e87]
- gridcell "diana.brown@example.com" [ref=f1e88]
- gridcell "25" [ref=f1e89]
- gridcell "HR" [ref=f1e90]
- gridcell "$43,702" [ref=f1e91]
- gridcell "2023-04-04" [ref=f1e92]
- gridcell "No" [ref=f1e93]
- row "5 Eve Jones eve.jones@example.com 26 Finance $44,936 2024-05-05 Yes" [ref=f1e94]:
- gridcell "5" [ref=f1e95]
- gridcell "Eve" [ref=f1e96]
- gridcell "Jones" [ref=f1e97]
- gridcell "eve.jones@example.com" [ref=f1e98]
- gridcell "26" [ref=f1e99]
- gridcell "Finance" [ref=f1e100]
- gridcell "$44,936" [ref=f1e101]
- gridcell "2024-05-05" [ref=f1e102]
- gridcell "Yes" [ref=f1e103]
- row "6 Frank Garcia frank.garcia@example.com 27 Design $46,170 2020-06-06 Yes" [ref=f1e104]:
- gridcell "6" [ref=f1e105]
- gridcell "Frank" [ref=f1e106]
- gridcell "Garcia" [ref=f1e107]
- gridcell "frank.garcia@example.com" [ref=f1e108]
- gridcell "27" [ref=f1e109]
- gridcell "Design" [ref=f1e110]
- gridcell "$46,170" [ref=f1e111]
- gridcell "2020-06-06" [ref=f1e112]
- gridcell "Yes" [ref=f1e113]
- row "7 Grace Miller grace.miller@example.com 28 Legal $47,404 2021-07-07 No" [ref=f1e114]:
- gridcell "7" [ref=f1e115]
- gridcell "Grace" [ref=f1e116]
- gridcell "Miller" [ref=f1e117]
- gridcell "grace.miller@example.com" [ref=f1e118]
- gridcell "28" [ref=f1e119]
- gridcell "Legal" [ref=f1e120]
- gridcell "$47,404" [ref=f1e121]
- gridcell "2021-07-07" [ref=f1e122]
- gridcell "No" [ref=f1e123]
- row "8 Henry Davis henry.davis@example.com 29 Support $48,638 2022-08-08 Yes" [ref=f1e124]:
- gridcell "8" [ref=f1e125]
- gridcell "Henry" [ref=f1e126]
- gridcell "Davis" [ref=f1e127]
- gridcell "henry.davis@example.com" [ref=f1e128]
- gridcell "29" [ref=f1e129]
- gridcell "Support" [ref=f1e130]
- gridcell "$48,638" [ref=f1e131]
- gridcell "2022-08-08" [ref=f1e132]
- gridcell "Yes" [ref=f1e133]
- row "9 Ivy Martinez ivy.martinez@example.com 30 Engineering $49,872 2023-09-09 Yes" [ref=f1e134]:
- gridcell "9" [ref=f1e135]
- gridcell "Ivy" [ref=f1e136]
- gridcell "Martinez" [ref=f1e137]
- gridcell "ivy.martinez@example.com" [ref=f1e138]
- gridcell "30" [ref=f1e139]
- gridcell "Engineering" [ref=f1e140]
- gridcell "$49,872" [ref=f1e141]
- gridcell "2023-09-09" [ref=f1e142]
- gridcell "Yes" [ref=f1e143]
- row "10 Jack Anderson jack.anderson@example.com 31 Marketing $51,106 2024-10-10 No" [ref=f1e144]:
- gridcell "10" [ref=f1e145]
- gridcell "Jack" [ref=f1e146]
- gridcell "Anderson" [ref=f1e147]
- gridcell "jack.anderson@example.com" [ref=f1e148]
- gridcell "31" [ref=f1e149]
- gridcell "Marketing" [ref=f1e150]
- gridcell "$51,106" [ref=f1e151]
- gridcell "2024-10-10" [ref=f1e152]
- gridcell "No" [ref=f1e153]
- row "11 Karen Taylor karen.taylor@example.com 32 Sales $52,340 2020-11-11 Yes" [ref=f1e154]:
- gridcell "11" [ref=f1e155]
- gridcell "Karen" [ref=f1e156]
- gridcell "Taylor" [ref=f1e157]
- gridcell "karen.taylor@example.com" [ref=f1e158]
- gridcell "32" [ref=f1e159]
- gridcell "Sales" [ref=f1e160]
- gridcell "$52,340" [ref=f1e161]
- gridcell "2020-11-11" [ref=f1e162]
- gridcell "Yes" [ref=f1e163]
- row "12 Leo Thomas leo.thomas@example.com 33 HR $53,574 2021-12-12 Yes" [ref=f1e164]:
- gridcell "12" [ref=f1e165]
- gridcell "Leo" [ref=f1e166]
- gridcell "Thomas" [ref=f1e167]
- gridcell "leo.thomas@example.com" [ref=f1e168]
- gridcell "33" [ref=f1e169]
- gridcell "HR" [ref=f1e170]
- gridcell "$53,574" [ref=f1e171]
- gridcell "2021-12-12" [ref=f1e172]
- gridcell "Yes" [ref=f1e173]
- row "13 Mia Hernandez mia.hernandez@example.com 34 Finance $54,808 2022-01-13 No" [ref=f1e174]:
- gridcell "13" [ref=f1e175]
- gridcell "Mia" [ref=f1e176]
- gridcell "Hernandez" [ref=f1e177]
- gridcell "mia.hernandez@example.com" [ref=f1e178]
- gridcell "34" [ref=f1e179]
- gridcell "Finance" [ref=f1e180]
- gridcell "$54,808" [ref=f1e181]
- gridcell "2022-01-13" [ref=f1e182]
- gridcell "No" [ref=f1e183]
- row "14 Nick Moore nick.moore@example.com 35 Design $56,042 2023-02-14 Yes" [ref=f1e184]:
- gridcell "14" [ref=f1e185]
- gridcell "Nick" [ref=f1e186]
- gridcell "Moore" [ref=f1e187]
- gridcell "nick.moore@example.com" [ref=f1e188]
- gridcell "35" [ref=f1e189]
- gridcell "Design" [ref=f1e190]
- gridcell "$56,042" [ref=f1e191]
- gridcell "2023-02-14" [ref=f1e192]
- gridcell "Yes" [ref=f1e193]
- row "15 Olivia Martin olivia.martin@example.com 36 Legal $57,276 2024-03-15 Yes" [ref=f1e194]:
- gridcell "15" [ref=f1e195]
- gridcell "Olivia" [ref=f1e196]
- gridcell "Martin" [ref=f1e197]
- gridcell "olivia.martin@example.com" [ref=f1e198]
- gridcell "36" [ref=f1e199]
- gridcell "Legal" [ref=f1e200]
- gridcell "$57,276" [ref=f1e201]
- gridcell "2024-03-15" [ref=f1e202]
- gridcell "Yes" [ref=f1e203]
- row "16 Paul Jackson paul.jackson@example.com 37 Support $58,510 2020-04-16 No" [ref=f1e204]:
- gridcell "16" [ref=f1e205]
- gridcell "Paul" [ref=f1e206]
- gridcell "Jackson" [ref=f1e207]
- gridcell "paul.jackson@example.com" [ref=f1e208]
- gridcell "37" [ref=f1e209]
- gridcell "Support" [ref=f1e210]
- gridcell "$58,510" [ref=f1e211]
- gridcell "2020-04-16" [ref=f1e212]
- gridcell "No" [ref=f1e213]
- row "17 Quinn Thompson quinn.thompson@example.com 38 Engineering $59,744 2021-05-17 Yes" [ref=f1e214]:
- gridcell "17" [ref=f1e215]
- gridcell "Quinn" [ref=f1e216]
- gridcell "Thompson" [ref=f1e217]
- gridcell "quinn.thompson@example.com" [ref=f1e218]
- gridcell "38" [ref=f1e219]
- gridcell "Engineering" [ref=f1e220]
- gridcell "$59,744" [ref=f1e221]
- gridcell "2021-05-17" [ref=f1e222]
- gridcell "Yes" [ref=f1e223]
- row "18 Rose White rose.white@example.com 39 Marketing $60,978 2022-06-18 Yes" [ref=f1e224]:
- gridcell "18" [ref=f1e225]
- gridcell "Rose" [ref=f1e226]
- gridcell "White" [ref=f1e227]
- gridcell "rose.white@example.com" [ref=f1e228]
- gridcell "39" [ref=f1e229]
- gridcell "Marketing" [ref=f1e230]
- gridcell "$60,978" [ref=f1e231]
- gridcell "2022-06-18" [ref=f1e232]
- gridcell "Yes" [ref=f1e233]
- row "19 Sam Lopez sam.lopez@example.com 40 Sales $62,212 2023-07-19 No" [ref=f1e234]:
- gridcell "19" [ref=f1e235]
- gridcell "Sam" [ref=f1e236]
- gridcell "Lopez" [ref=f1e237]
- gridcell "sam.lopez@example.com" [ref=f1e238]
- gridcell "40" [ref=f1e239]
- gridcell "Sales" [ref=f1e240]
- gridcell "$62,212" [ref=f1e241]
- gridcell "2023-07-19" [ref=f1e242]
- gridcell "No" [ref=f1e243]
- row "20 Tina Lee tina.lee@example.com 41 HR $63,446 2024-08-20 Yes" [ref=f1e244]:
- gridcell "20" [ref=f1e245]
- gridcell "Tina" [ref=f1e246]
- gridcell "Lee" [ref=f1e247]
- gridcell "tina.lee@example.com" [ref=f1e248]
- gridcell "41" [ref=f1e249]
- gridcell "HR" [ref=f1e250]
- gridcell "$63,446" [ref=f1e251]
- gridcell "2024-08-20" [ref=f1e252]
- gridcell "Yes" [ref=f1e253]
- generic [ref=f1e254]:
- strong [ref=f1e255]: "Active Filters:"
- generic [ref=f1e256]: "[]"
- region "Addon panel" [ref=e312]:
- heading "Addon panel" [level=2] [ref=e313]
- generic [ref=e314]:
- generic [ref=e315]:
- generic [ref=e316]:
- button "Move addon panel to right" [ref=e317] [cursor=pointer]:
- img [ref=e318]
- button "Hide addon panel" [ref=e321] [cursor=pointer]:
- img [ref=e322]
- tablist "Available addons" [ref=e327]:
- tab "Controls" [selected] [ref=e328] [cursor=pointer]:
- generic [ref=e330]: Controls
- tab "Actions" [ref=e331] [cursor=pointer]:
- generic [ref=e333]: Actions
- tab "Interactions" [ref=e334] [cursor=pointer]:
- generic [ref=e336]: Interactions
- tabpanel "Controls" [ref=e337]:
- generic [ref=e344]:
- button "Reset controls" [ref=e346] [cursor=pointer]:
- img [ref=e347]
- table [ref=e349]:
- rowgroup [ref=e350]:
- row "Name Description Default Control" [ref=e351]:
- columnheader "Name" [ref=e352]
- columnheader "Description" [ref=e353]
- columnheader "Default" [ref=e354]
- columnheader "Control" [ref=e355]
- rowgroup [ref=e356]:
- row "columns array - -" [ref=e357]:
- cell "columns" [ref=e358]
- cell "array" [ref=e359]:
- generic [ref=e362]: array
- cell "-" [ref=e363]
- cell "-" [ref=e364]
- row "data array - -" [ref=e365]:
- cell "data" [ref=e366]
- cell "array" [ref=e367]:
- generic [ref=e370]: array
- cell "-" [ref=e371]
- cell "-" [ref=e372]
- row "getRowId function - -" [ref=e373]:
- cell "getRowId" [ref=e374]
- cell "function" [ref=e375]:
- generic [ref=e378]: function
- cell "-" [ref=e379]
- cell "-" [ref=e380]
- row "height number - -" [ref=e381]:
- cell "height" [ref=e382]
- cell "number" [ref=e383]:
- generic [ref=e386]: number
- cell "-" [ref=e387]
- cell "-" [ref=e388]