@vibe/core 4.2.5 → 4.3.0-alpha-9bd83.0

package/dist/metadata/examples/Tooltip.md

@@ -0,0 +1,53 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<div style={{
+  padding: "40px 0 0 50px"
+}}>
+      <Tooltip id="overview-tooltip" {...args} open middleware={storyMiddleware} hideWhenReferenceHidden>
+        <div id="overview-tooltip-trigger" />
+      </Tooltip>
+    </div>
+```
+
+## Positions
+
+```tsx
+return <Flex gap={16}>
+        <div style={{
+    padding: "0 64px 68px 0",
+    margin: "0 32px"
+  }}>
+          <Tooltip id="position-top-tooltip" middleware={storyMiddleware} hideWhenReferenceHidden content="Top" shouldShowOnMount position="bottom" open>
+            <div />
+          </Tooltip>
+        </div>
+        <div style={{
+    padding: "50px 0 0 0",
+    margin: "0 32px"
+  }}>
+          <Tooltip id="position-bottom-tooltip" middleware={storyMiddleware} hideWhenReferenceHidden content="Bottom" shouldShowOnMount open>
+            <div />
+          </Tooltip>
+        </div>
+        <div style={{
+    padding: "0 32px 8px 32px",
+    margin: "0 32px"
+  }}>
+          <Tooltip id="position-left-tooltip" middleware={storyMiddleware} hideWhenReferenceHidden content="Left" position="right" shouldShowOnMount open>
+            <div />
+          </Tooltip>
+        </div>
+        <div style={{
+    padding: "0 64px 8px 64px",
+    margin: "0 64px"
+  }}>
+          <Tooltip id="position-right-tooltip" middleware={storyMiddleware} hideWhenReferenceHidden content="Right" position="left" shouldShowOnMount open>
+            <div />
+          </Tooltip>
+        </div>
+      </Flex>;
+```
+

package/dist/metadata/examples/VirtualizedGrid.md

@@ -0,0 +1,54 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const virtualizedGridTemplate = (args: VirtualizedGridProps) => {
+  const [scrollToId, setScrollToId] = useState(null);
+  const [lastScrolledId, setLastScrolledId] = useState(null);
+  const [scrollToDisabled, setScrollToDisabled] = useState(false);
+  const [nextScrollToId, setNextScrollToId] = useState(ITEMS_COUNT - 1);
+  const getColumnWidth = useCallback(() => {
+    return 100;
+  }, []);
+  const getRowHeight = useCallback(() => {
+    return 50;
+  }, []);
+  const items = useMemo(() => {
+    return generateItems(50, 100, ITEMS_COUNT);
+  }, []);
+  const onClickToScroll = useCallback(() => {
+    setScrollToId(nextScrollToId);
+    setLastScrolledId("");
+    setScrollToDisabled(true);
+  }, [setScrollToId, setScrollToDisabled, nextScrollToId]);
+  const onScrollToFinished = useCallback(() => {
+    setLastScrolledId(nextScrollToId);
+    setScrollToId(null);
+    setNextScrollToId(Math.round(Math.random() * items.length));
+    setScrollToDisabled(false);
+  }, [nextScrollToId, items, setNextScrollToId, setLastScrolledId]);
+  return <Flex align="center" style={{
+    width: 430,
+    height: 300,
+    overflow: "hidden"
+  }}>
+      <div style={{
+      width: "430px",
+      height: "100%"
+    }}>
+        <VirtualizedGrid scrollToId={scrollToId} items={items} itemRenderer={itemRenderer} getColumnWidth={getColumnWidth} getRowHeight={getRowHeight} onScrollToFinished={onScrollToFinished} {...args} />
+      </div>
+      <Flex direction="column" align="center">
+        <Button size="medium" kind="primary" onClick={onClickToScroll} disabled={scrollToDisabled}>
+          {`Scroll to Item ${nextScrollToId}`}
+        </Button>
+        <div style={{
+        marginTop: 16,
+        opacity: lastScrolledId ? 1 : 0
+      }}>{`Scrolled to Item ${lastScrolledId}`}</div>
+      </Flex>
+    </Flex>;
+}
+```
+

package/dist/metadata/examples/VirtualizedList.md

@@ -0,0 +1,50 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const virtualizedListTemplate = (args: VirtualizedListItem) => {
+  const itemRenderer = useCallback((item: VirtualizedListItem, index: number, style: React.CSSProperties) => {
+    const backgroundColor = index % 2 === 0 ? "#e1e1e1" : "#f8f8f0";
+    return <div key={index} style={style}>
+        <Flex align="center" justify="center" style={{
+        backgroundColor,
+        height: item.height
+      }}>
+          {item.value as React.ReactNode}
+        </Flex>
+      </div>;
+  }, []);
+  return <Flex align="start" gap="large" style={{
+    width: "100%"
+  }} direction="row">
+      <Flex align="center" style={{
+      width: 330,
+      height: 300,
+      overflow: "hidden"
+    }}>
+        <div style={{
+        width: 200,
+        height: "100%"
+      }}>
+          <Heading type="h3">Vertical List</Heading>
+          <VirtualizedList {...args} items={generateItems(30, 1000, "vertical")} itemRenderer={itemRenderer} getItemSize={item => item.height} />
+        </div>
+      </Flex>
+      <Flex align="center" style={{
+      flexGrow: 1,
+      height: 300,
+      overflow: "hidden"
+    }}>
+        <div style={{
+        height: "100%",
+        width: "100%"
+      }}>
+          <Heading type="h3">Horizontal List</Heading>
+          <VirtualizedList {...args} items={generateItems(100, 1000, "horizontal")} itemRenderer={itemRenderer} getItemSize={item => item.width} layout="horizontal" />
+        </div>
+      </Flex>
+    </Flex>;
+}
+```
+

package/dist/metadata/examples/useGridKeyboardNavigationContext.md

@@ -0,0 +1,61 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const wrapperRef = useRef(null);
+const leftElRef = useRef(null);
+const rightElRef = useRef(null);
+const keyboardContext = useGridKeyboardNavigationContext([{
+  leftElement: leftElRef,
+  rightElement: rightElRef
+}], wrapperRef);
+return <GridKeyboardNavigationContext.Provider value={keyboardContext}>
+        <Flex ref={wrapperRef}>
+          <DummyNavigableGrid ref={leftElRef} itemsCount={15} numberOfItemsInLine={4} itemPrefix="L" />
+          <DummyNavigableGrid ref={rightElRef} itemsCount={7} numberOfItemsInLine={2} itemPrefix="R" />
+        </Flex>
+      </GridKeyboardNavigationContext.Provider>;
+```
+
+## Disabled Elements
+
+```tsx
+const wrapperRef = useRef(null);
+const topElRef = useRef(null);
+const middleElRef = useRef(null);
+const bottomElRef = useRef(null);
+const keyboardContext = useGridKeyboardNavigationContext([{
+  topElement: topElRef,
+  bottomElement: middleElRef
+}, {
+  topElement: middleElRef,
+  bottomElement: bottomElRef
+}], wrapperRef);
+return <GridKeyboardNavigationContext.Provider value={keyboardContext}>
+        <Flex ref={wrapperRef} direction="column" justify="center" className="use-grid-keyboard-dummy-grid-wrapper">
+          <DummyNavigableGrid ref={topElRef} itemsCount={3} numberOfItemsInLine={3} itemPrefix="T" />
+          <DummyNavigableGrid ref={middleElRef} itemsCount={3} numberOfItemsInLine={3} itemPrefix="M" disabled />
+          <DummyNavigableGrid ref={bottomElRef} itemsCount={3} numberOfItemsInLine={3} itemPrefix="B" />
+        </Flex>
+      </GridKeyboardNavigationContext.Provider>;
+```
+
+## Multiple Depths
+
+```tsx
+const wrapperRef = useRef(null);
+const topElRef = useRef(null);
+const bottomElRef = useRef(null);
+const keyboardContext = useGridKeyboardNavigationContext([{
+  topElement: topElRef,
+  bottomElement: bottomElRef
+}], wrapperRef);
+return <GridKeyboardNavigationContext.Provider value={keyboardContext}>
+        <Flex id="twoGridLayoutsWrapper" ref={wrapperRef} direction="column" tabIndex={-1}>
+          <LayoutWithInnerKeyboardNavigation id="gridLayoutTop" itemPrefix="T" ref={topElRef} />
+          <LayoutWithInnerKeyboardNavigation id="gridLayoutBottom" itemPrefix="B" ref={bottomElRef} />
+        </Flex>
+      </GridKeyboardNavigationContext.Provider>;
+```
+

package/dist/mocked_classnames/scripts/build-all-metadata.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mocked_classnames/scripts/extract-accessibility.d.ts

@@ -0,0 +1,4 @@
+export declare function getMdxFiles(): string[];
+export declare function extractAccessibilityFromMdx(file: string): void;
+export declare function cleanUpAccessibilityContent(content: string): string;
+export declare function run(): void;

package/dist/mocked_classnames/scripts/extract-examples.d.ts

@@ -0,0 +1,3 @@
+import type { File } from "@babel/types";
+export declare function generateCodeForOneLiner(ast: File, constName: string): string | null;
+export declare function run(): void;

package/dist/scripts/build-all-metadata.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/scripts/extract-accessibility.d.ts

@@ -0,0 +1,4 @@
+export declare function getMdxFiles(): string[];
+export declare function extractAccessibilityFromMdx(file: string): void;
+export declare function cleanUpAccessibilityContent(content: string): string;
+export declare function run(): void;

package/dist/scripts/extract-examples.d.ts

@@ -0,0 +1,3 @@
+import type { File } from "@babel/types";
+export declare function generateCodeForOneLiner(ast: File, constName: string): string | null;
+export declare function run(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "4.2.5",
+  "version": "4.3.0-alpha-9bd83.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -80,7 +80,7 @@
     "build": "yarn build:esm && yarn build:mocked-classnames && yarn build:metadata",
     "build:esm": "rollup -c",
     "build:mocked-classnames": "[ \"$SKIP_RELEASE_ARTIFACTS\" = \"true\" ] || mock_classnames=on rollup -c",
-    "build:metadata": "[ \"$SKIP_RELEASE_ARTIFACTS\" = \"true\" ] || tsx src/scripts/generate-metadata.ts",
+    "build:metadata": "[ \"$SKIP_RELEASE_ARTIFACTS\" = \"true\" ] || tsx src/scripts/build-all-metadata.ts",
     "link-local": "npm link && npm start",
     "plop": "plop",
     "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\"",
@@ -91,20 +91,20 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
     "@vibe/base": "4.0.3",
-    "@vibe/button": "4.0.4",
+    "@vibe/button": "4.0.3",
     "@vibe/clickable": "4.0.3",
-    "@vibe/dialog": "4.1.1",
+    "@vibe/dialog": "4.1.0",
     "@vibe/hooks": "4.0.3",
     "@vibe/icon": "4.0.3",
-    "@vibe/icon-button": "4.0.4",
-    "@vibe/icons": "4.1.0",
-    "@vibe/layer": "4.0.4",
+    "@vibe/icon-button": "4.0.3",
+    "@vibe/icons": "4.0.2",
+    "@vibe/layer": "4.0.3",
     "@vibe/layout": "4.0.3",
     "@vibe/loader": "4.0.3",
     "@vibe/shared": "4.0.3",
     "@vibe/style": "4.0.0",
-    "@vibe/tooltip": "4.0.4",
-    "@vibe/typography": "4.0.4",
+    "@vibe/tooltip": "4.0.3",
+    "@vibe/typography": "4.0.3",
     "browserslist-config-monday": "1.0.6",
     "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
@@ -123,6 +123,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/eslint-parser": "^7.16.5",
+    "@babel/generator": "^7.24.4",
     "@babel/parser": "^7.24.4",
     "@babel/plugin-proposal-class-properties": "^7.16.5",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
@@ -134,6 +135,7 @@
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/standalone": "^7.24.4",
+    "@babel/traverse": "^7.24.4",
     "@babel/types": "^7.24.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@jest/transform": "^29.7.0",
@@ -273,5 +275,5 @@
   "browserslist": [
     "extends browserslist-config-monday"
   ],
-  "gitHead": "321b28a1b6ba9ad6d505c768fa2878bac015df75"
+  "gitHead": "74af140b25c3ace0b7424009773c904eee11643c"
 }