@walkeros/explorer 3.0.0 → 3.0.2
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/dist/__mocks__/@monaco-editor/react.d.ts +3 -0
- package/dist/__mocks__/@monaco-editor/react.d.ts.map +1 -0
- package/dist/__mocks__/@monaco-editor/react.js +4 -0
- package/dist/__mocks__/@monaco-editor/react.js.map +1 -0
- package/dist/components/atoms/box.d.ts +27 -0
- package/dist/components/atoms/box.d.ts.map +1 -0
- package/dist/components/atoms/box.js +86 -0
- package/dist/components/atoms/box.js.map +1 -0
- package/dist/components/atoms/box.stories.d.ts +34 -0
- package/dist/components/atoms/box.stories.d.ts.map +1 -0
- package/dist/components/atoms/box.stories.js +104 -0
- package/dist/components/atoms/box.stories.js.map +1 -0
- package/dist/components/atoms/button-group.d.ts +17 -0
- package/dist/components/atoms/button-group.d.ts.map +1 -0
- package/dist/components/atoms/button-group.js +12 -0
- package/dist/components/atoms/button-group.js.map +1 -0
- package/dist/components/atoms/button-group.stories.d.ts +18 -0
- package/dist/components/atoms/button-group.stories.d.ts.map +1 -0
- package/dist/components/atoms/button-group.stories.js +39 -0
- package/dist/components/atoms/button-group.stories.js.map +1 -0
- package/dist/components/atoms/button-link.d.ts +12 -0
- package/dist/components/atoms/button-link.d.ts.map +1 -0
- package/dist/components/atoms/button-link.js +10 -0
- package/dist/components/atoms/button-link.js.map +1 -0
- package/dist/components/atoms/button-link.stories.d.ts +11 -0
- package/dist/components/atoms/button-link.stories.d.ts.map +1 -0
- package/dist/components/atoms/button-link.stories.js +50 -0
- package/dist/components/atoms/button-link.stories.js.map +1 -0
- package/dist/components/atoms/button.d.ts +15 -0
- package/dist/components/atoms/button.d.ts.map +1 -0
- package/dist/components/atoms/button.js +11 -0
- package/dist/components/atoms/button.js.map +1 -0
- package/dist/components/atoms/button.stories.d.ts +14 -0
- package/dist/components/atoms/button.stories.d.ts.map +1 -0
- package/dist/components/atoms/button.stories.js +25 -0
- package/dist/components/atoms/button.stories.js.map +1 -0
- package/dist/components/atoms/code.d.ts +92 -0
- package/dist/components/atoms/code.d.ts.map +1 -0
- package/dist/components/atoms/code.js +405 -0
- package/dist/components/atoms/code.js.map +1 -0
- package/dist/components/atoms/code.stories.d.ts +46 -0
- package/dist/components/atoms/code.stories.d.ts.map +1 -0
- package/dist/components/atoms/code.stories.js +156 -0
- package/dist/components/atoms/code.stories.js.map +1 -0
- package/dist/components/atoms/footer.d.ts +21 -0
- package/dist/components/atoms/footer.d.ts.map +1 -0
- package/dist/components/atoms/footer.js +19 -0
- package/dist/components/atoms/footer.js.map +1 -0
- package/dist/components/atoms/footer.stories.d.ts +14 -0
- package/dist/components/atoms/footer.stories.d.ts.map +1 -0
- package/dist/components/atoms/footer.stories.js +29 -0
- package/dist/components/atoms/footer.stories.js.map +1 -0
- package/dist/components/atoms/grid.d.ts +65 -0
- package/dist/components/atoms/grid.d.ts.map +1 -0
- package/dist/components/atoms/grid.js +169 -0
- package/dist/components/atoms/grid.js.map +1 -0
- package/dist/components/atoms/grid.stories.d.ts +18 -0
- package/dist/components/atoms/grid.stories.d.ts.map +1 -0
- package/dist/components/atoms/grid.stories.js +60 -0
- package/dist/components/atoms/grid.stories.js.map +1 -0
- package/dist/components/atoms/header.d.ts +7 -0
- package/dist/components/atoms/header.d.ts.map +1 -0
- package/dist/components/atoms/header.js +5 -0
- package/dist/components/atoms/header.js.map +1 -0
- package/dist/components/atoms/header.stories.d.ts +15 -0
- package/dist/components/atoms/header.stories.d.ts.map +1 -0
- package/dist/components/atoms/header.stories.js +37 -0
- package/dist/components/atoms/header.stories.js.map +1 -0
- package/dist/components/atoms/icons/icon.stories.d.ts +18 -0
- package/dist/components/atoms/icons/icon.stories.d.ts.map +1 -0
- package/dist/components/atoms/icons/icon.stories.js +37 -0
- package/dist/components/atoms/icons/icon.stories.js.map +1 -0
- package/dist/components/atoms/icons/icons.d.ts +2 -0
- package/dist/components/atoms/icons/icons.d.ts.map +1 -0
- package/dist/components/atoms/icons/icons.js +7 -0
- package/dist/components/atoms/icons/icons.js.map +1 -0
- package/dist/components/atoms/icons/index.d.ts +3 -0
- package/dist/components/atoms/icons/index.d.ts.map +1 -0
- package/dist/components/atoms/icons/index.js +3 -0
- package/dist/components/atoms/icons/index.js.map +1 -0
- package/dist/components/atoms/mdx-code.d.ts +33 -0
- package/dist/components/atoms/mdx-code.d.ts.map +1 -0
- package/dist/components/atoms/mdx-code.js +69 -0
- package/dist/components/atoms/mdx-code.js.map +1 -0
- package/dist/components/atoms/preview-footer.d.ts +32 -0
- package/dist/components/atoms/preview-footer.d.ts.map +1 -0
- package/dist/components/atoms/preview-footer.js +31 -0
- package/dist/components/atoms/preview-footer.js.map +1 -0
- package/dist/components/atoms/spinner.d.ts +17 -0
- package/dist/components/atoms/spinner.d.ts.map +1 -0
- package/dist/components/atoms/spinner.js +14 -0
- package/dist/components/atoms/spinner.js.map +1 -0
- package/dist/components/atoms/spinner.stories.d.ts +7 -0
- package/dist/components/atoms/spinner.stories.d.ts.map +1 -0
- package/dist/components/atoms/spinner.stories.js +9 -0
- package/dist/components/atoms/spinner.stories.js.map +1 -0
- package/dist/components/atoms/toggle.d.ts +9 -0
- package/dist/components/atoms/toggle.d.ts.map +1 -0
- package/dist/components/atoms/toggle.js +6 -0
- package/dist/components/atoms/toggle.js.map +1 -0
- package/dist/components/demos/DestinationDemo.d.ts +48 -0
- package/dist/components/demos/DestinationDemo.d.ts.map +1 -0
- package/dist/components/demos/DestinationDemo.js +105 -0
- package/dist/components/demos/DestinationDemo.js.map +1 -0
- package/dist/components/demos/DestinationDemo.stories.d.ts +17 -0
- package/dist/components/demos/DestinationDemo.stories.d.ts.map +1 -0
- package/dist/components/demos/DestinationDemo.stories.js +53 -0
- package/dist/components/demos/DestinationDemo.stories.js.map +1 -0
- package/dist/components/demos/DestinationInitDemo.d.ts +34 -0
- package/dist/components/demos/DestinationInitDemo.d.ts.map +1 -0
- package/dist/components/demos/DestinationInitDemo.js +73 -0
- package/dist/components/demos/DestinationInitDemo.js.map +1 -0
- package/dist/components/demos/DestinationInitDemo.stories.d.ts +17 -0
- package/dist/components/demos/DestinationInitDemo.stories.d.ts.map +1 -0
- package/dist/components/demos/DestinationInitDemo.stories.js +39 -0
- package/dist/components/demos/DestinationInitDemo.stories.js.map +1 -0
- package/dist/components/demos/PromotionPlayground.d.ts +30 -0
- package/dist/components/demos/PromotionPlayground.d.ts.map +1 -0
- package/dist/components/demos/PromotionPlayground.js +366 -0
- package/dist/components/demos/PromotionPlayground.js.map +1 -0
- package/dist/components/demos/PromotionPlayground.stories.d.ts +27 -0
- package/dist/components/demos/PromotionPlayground.stories.d.ts.map +1 -0
- package/dist/components/demos/PromotionPlayground.stories.js +32 -0
- package/dist/components/demos/PromotionPlayground.stories.js.map +1 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.d.ts +24 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.d.ts.map +1 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.js +10 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.js.map +1 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.stories.d.ts +7 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.stories.d.ts.map +1 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.stories.js +71 -0
- package/dist/components/molecules/architecture-flow/ArchitectureFlow.stories.js.map +1 -0
- package/dist/components/molecules/architecture-flow/index.d.ts +3 -0
- package/dist/components/molecules/architecture-flow/index.d.ts.map +1 -0
- package/dist/components/molecules/architecture-flow/index.js +2 -0
- package/dist/components/molecules/architecture-flow/index.js.map +1 -0
- package/dist/components/molecules/code-box.d.ts +75 -0
- package/dist/components/molecules/code-box.d.ts.map +1 -0
- package/dist/components/molecules/code-box.js +174 -0
- package/dist/components/molecules/code-box.js.map +1 -0
- package/dist/components/molecules/code-box.stories.d.ts +87 -0
- package/dist/components/molecules/code-box.stories.d.ts.map +1 -0
- package/dist/components/molecules/code-box.stories.js +300 -0
- package/dist/components/molecules/code-box.stories.js.map +1 -0
- package/dist/components/molecules/code-snippet.d.ts +58 -0
- package/dist/components/molecules/code-snippet.d.ts.map +1 -0
- package/dist/components/molecules/code-snippet.js +72 -0
- package/dist/components/molecules/code-snippet.js.map +1 -0
- package/dist/components/molecules/code-snippet.stories.d.ts +23 -0
- package/dist/components/molecules/code-snippet.stories.d.ts.map +1 -0
- package/dist/components/molecules/code-snippet.stories.js +87 -0
- package/dist/components/molecules/code-snippet.stories.js.map +1 -0
- package/dist/components/molecules/dropdown.d.ts +68 -0
- package/dist/components/molecules/dropdown.d.ts.map +1 -0
- package/dist/components/molecules/dropdown.js +47 -0
- package/dist/components/molecules/dropdown.js.map +1 -0
- package/dist/components/molecules/dropdown.stories.d.ts +7 -0
- package/dist/components/molecules/dropdown.stories.d.ts.map +1 -0
- package/dist/components/molecules/dropdown.stories.js +18 -0
- package/dist/components/molecules/dropdown.stories.js.map +1 -0
- package/dist/components/molecules/flow-map/FlowMap.d.ts +74 -0
- package/dist/components/molecules/flow-map/FlowMap.d.ts.map +1 -0
- package/dist/components/molecules/flow-map/FlowMap.js +1039 -0
- package/dist/components/molecules/flow-map/FlowMap.js.map +1 -0
- package/dist/components/molecules/flow-map/FlowMap.stories.d.ts +47 -0
- package/dist/components/molecules/flow-map/FlowMap.stories.d.ts.map +1 -0
- package/dist/components/molecules/flow-map/FlowMap.stories.js +355 -0
- package/dist/components/molecules/flow-map/FlowMap.stories.js.map +1 -0
- package/dist/components/molecules/flow-map/FlowMap.transformers.stories.d.ts +29 -0
- package/dist/components/molecules/flow-map/FlowMap.transformers.stories.d.ts.map +1 -0
- package/dist/components/molecules/flow-map/FlowMap.transformers.stories.js +117 -0
- package/dist/components/molecules/flow-map/FlowMap.transformers.stories.js.map +1 -0
- package/dist/components/molecules/flow-map/index.d.ts +3 -0
- package/dist/components/molecules/flow-map/index.d.ts.map +1 -0
- package/dist/components/molecules/flow-map/index.js +2 -0
- package/dist/components/molecules/flow-map/index.js.map +1 -0
- package/dist/components/molecules/preview.d.ts +23 -0
- package/dist/components/molecules/preview.d.ts.map +1 -0
- package/dist/components/molecules/preview.js +232 -0
- package/dist/components/molecules/preview.js.map +1 -0
- package/dist/components/molecules/preview.stories.d.ts +23 -0
- package/dist/components/molecules/preview.stories.d.ts.map +1 -0
- package/dist/components/molecules/preview.stories.js +186 -0
- package/dist/components/molecules/preview.stories.js.map +1 -0
- package/dist/components/molecules/property-table.d.ts +7 -0
- package/dist/components/molecules/property-table.d.ts.map +1 -0
- package/dist/components/molecules/property-table.js +88 -0
- package/dist/components/molecules/property-table.js.map +1 -0
- package/dist/components/molecules/property-table.stories.d.ts +24 -0
- package/dist/components/molecules/property-table.stories.d.ts.map +1 -0
- package/dist/components/molecules/property-table.stories.js +86 -0
- package/dist/components/molecules/property-table.stories.js.map +1 -0
- package/dist/components/organisms/browser-box.d.ts +31 -0
- package/dist/components/organisms/browser-box.d.ts.map +1 -0
- package/dist/components/organisms/browser-box.js +80 -0
- package/dist/components/organisms/browser-box.js.map +1 -0
- package/dist/components/organisms/browser-box.stories.d.ts +26 -0
- package/dist/components/organisms/browser-box.stories.d.ts.map +1 -0
- package/dist/components/organisms/browser-box.stories.js +102 -0
- package/dist/components/organisms/browser-box.stories.js.map +1 -0
- package/dist/components/organisms/collector-box.d.ts +24 -0
- package/dist/components/organisms/collector-box.d.ts.map +1 -0
- package/dist/components/organisms/collector-box.js +56 -0
- package/dist/components/organisms/collector-box.js.map +1 -0
- package/dist/components/organisms/collector-box.stories.d.ts +22 -0
- package/dist/components/organisms/collector-box.stories.d.ts.map +1 -0
- package/dist/components/organisms/collector-box.stories.js +59 -0
- package/dist/components/organisms/collector-box.stories.js.map +1 -0
- package/dist/components/organisms/live-code.d.ts +22 -0
- package/dist/components/organisms/live-code.d.ts.map +1 -0
- package/dist/components/organisms/live-code.js +50 -0
- package/dist/components/organisms/live-code.js.map +1 -0
- package/dist/components/organisms/live-code.stories.d.ts +24 -0
- package/dist/components/organisms/live-code.stories.d.ts.map +1 -0
- package/dist/components/organisms/live-code.stories.js +55 -0
- package/dist/components/organisms/live-code.stories.js.map +1 -0
- package/dist/components/ui/button.d.ts +4 -0
- package/dist/components/ui/button.d.ts.map +1 -0
- package/dist/components/ui/button.js +6 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/icon.d.ts +5 -0
- package/dist/components/ui/icon.d.ts.map +1 -0
- package/dist/components/ui/icon.js +5 -0
- package/dist/components/ui/icon.js.map +1 -0
- package/dist/contexts/GridHeightContext.d.ts +11 -0
- package/dist/contexts/GridHeightContext.d.ts.map +1 -0
- package/dist/contexts/GridHeightContext.js +14 -0
- package/dist/contexts/GridHeightContext.js.map +1 -0
- package/dist/helpers/capture.d.ts +83 -0
- package/dist/helpers/capture.d.ts.map +1 -0
- package/dist/helpers/capture.js +125 -0
- package/dist/helpers/capture.js.map +1 -0
- package/dist/helpers/destinations.d.ts +21 -0
- package/dist/helpers/destinations.d.ts.map +1 -0
- package/dist/helpers/destinations.js +46 -0
- package/dist/helpers/destinations.js.map +1 -0
- package/dist/hooks/useDropdown.d.ts +34 -0
- package/dist/hooks/useDropdown.d.ts.map +1 -0
- package/dist/hooks/useDropdown.js +66 -0
- package/dist/hooks/useDropdown.js.map +1 -0
- package/dist/hooks/useMonacoHeight.d.ts +31 -0
- package/dist/hooks/useMonacoHeight.d.ts.map +1 -0
- package/dist/hooks/useMonacoHeight.js +83 -0
- package/dist/hooks/useMonacoHeight.js.map +1 -0
- package/dist/hooks/useTreeState.d.ts +32 -0
- package/dist/hooks/useTreeState.d.ts.map +1 -0
- package/dist/hooks/useTreeState.js +94 -0
- package/dist/hooks/useTreeState.js.map +1 -0
- package/dist/index.d.ts +69 -1338
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +59 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/utils.d.ts +7 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/lib/utils.js +10 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/providers/MDXProvider.d.ts +40 -0
- package/dist/providers/MDXProvider.d.ts.map +1 -0
- package/dist/providers/MDXProvider.js +57 -0
- package/dist/providers/MDXProvider.js.map +1 -0
- package/dist/themes/index.d.ts +23 -0
- package/dist/themes/index.d.ts.map +1 -0
- package/dist/themes/index.js +29 -0
- package/dist/themes/index.js.map +1 -0
- package/dist/themes/lighthouse.d.ts +26 -0
- package/dist/themes/lighthouse.d.ts.map +1 -0
- package/dist/themes/lighthouse.js +230 -0
- package/dist/themes/lighthouse.js.map +1 -0
- package/dist/themes/palenight.d.ts +31 -0
- package/dist/themes/palenight.d.ts.map +1 -0
- package/dist/themes/palenight.js +236 -0
- package/dist/themes/palenight.js.map +1 -0
- package/dist/themes/types.d.ts +103 -0
- package/dist/themes/types.d.ts.map +1 -0
- package/dist/themes/types.js +8 -0
- package/dist/themes/types.js.map +1 -0
- package/dist/types/intellisense.d.ts +33 -0
- package/dist/types/intellisense.d.ts.map +1 -0
- package/dist/types/intellisense.js +2 -0
- package/dist/types/intellisense.js.map +1 -0
- package/dist/utils/code-normalizer.d.ts +11 -0
- package/dist/utils/code-normalizer.d.ts.map +1 -0
- package/dist/utils/code-normalizer.js +21 -0
- package/dist/utils/code-normalizer.js.map +1 -0
- package/dist/utils/contract-path-walker.d.ts +27 -0
- package/dist/utils/contract-path-walker.d.ts.map +1 -0
- package/dist/utils/contract-path-walker.js +145 -0
- package/dist/utils/contract-path-walker.js.map +1 -0
- package/dist/utils/format-code.d.ts +9 -0
- package/dist/utils/format-code.d.ts.map +1 -0
- package/dist/utils/format-code.js +77 -0
- package/dist/utils/format-code.js.map +1 -0
- package/dist/utils/mapping-context-detector.d.ts +17 -0
- package/dist/utils/mapping-context-detector.d.ts.map +1 -0
- package/dist/utils/mapping-context-detector.js +22 -0
- package/dist/utils/mapping-context-detector.js.map +1 -0
- package/dist/utils/monaco-context-types.d.ts +39 -0
- package/dist/utils/monaco-context-types.d.ts.map +1 -0
- package/dist/utils/monaco-context-types.js +426 -0
- package/dist/utils/monaco-context-types.js.map +1 -0
- package/dist/utils/monaco-decorators.d.ts +17 -0
- package/dist/utils/monaco-decorators.d.ts.map +1 -0
- package/dist/utils/monaco-decorators.js +81 -0
- package/dist/utils/monaco-decorators.js.map +1 -0
- package/dist/utils/monaco-formatters.d.ts +16 -0
- package/dist/utils/monaco-formatters.d.ts.map +1 -0
- package/dist/utils/monaco-formatters.js +139 -0
- package/dist/utils/monaco-formatters.js.map +1 -0
- package/dist/utils/monaco-intellisense-flow-extractor.d.ts +13 -0
- package/dist/utils/monaco-intellisense-flow-extractor.d.ts.map +1 -0
- package/dist/utils/monaco-intellisense-flow-extractor.js +168 -0
- package/dist/utils/monaco-intellisense-flow-extractor.js.map +1 -0
- package/dist/utils/monaco-json-path.d.ts +12 -0
- package/dist/utils/monaco-json-path.d.ts.map +1 -0
- package/dist/utils/monaco-json-path.js +68 -0
- package/dist/utils/monaco-json-path.js.map +1 -0
- package/dist/utils/monaco-json-schema.d.ts +45 -0
- package/dist/utils/monaco-json-schema.d.ts.map +1 -0
- package/dist/utils/monaco-json-schema.js +90 -0
- package/dist/utils/monaco-json-schema.js.map +1 -0
- package/dist/utils/monaco-schema-contract.d.ts +8 -0
- package/dist/utils/monaco-schema-contract.d.ts.map +1 -0
- package/dist/utils/monaco-schema-contract.js +73 -0
- package/dist/utils/monaco-schema-contract.js.map +1 -0
- package/dist/utils/monaco-schema-enrichment.d.ts +26 -0
- package/dist/utils/monaco-schema-enrichment.d.ts.map +1 -0
- package/dist/utils/monaco-schema-enrichment.js +31 -0
- package/dist/utils/monaco-schema-enrichment.js.map +1 -0
- package/dist/utils/monaco-schema-flow-config.d.ts +10 -0
- package/dist/utils/monaco-schema-flow-config.d.ts.map +1 -0
- package/dist/utils/monaco-schema-flow-config.js +201 -0
- package/dist/utils/monaco-schema-flow-config.js.map +1 -0
- package/dist/utils/monaco-schema-variables.d.ts +4 -0
- package/dist/utils/monaco-schema-variables.d.ts.map +1 -0
- package/dist/utils/monaco-schema-variables.js +26 -0
- package/dist/utils/monaco-schema-variables.js.map +1 -0
- package/dist/utils/monaco-types.d.ts +174 -0
- package/dist/utils/monaco-types.d.ts.map +1 -0
- package/dist/utils/monaco-types.js +378 -0
- package/dist/utils/monaco-types.js.map +1 -0
- package/dist/utils/monaco-walkeros-completions.d.ts +23 -0
- package/dist/utils/monaco-walkeros-completions.d.ts.map +1 -0
- package/dist/utils/monaco-walkeros-completions.js +258 -0
- package/dist/utils/monaco-walkeros-completions.js.map +1 -0
- package/dist/utils/monaco-walkeros-decorations.d.ts +29 -0
- package/dist/utils/monaco-walkeros-decorations.d.ts.map +1 -0
- package/dist/utils/monaco-walkeros-decorations.js +87 -0
- package/dist/utils/monaco-walkeros-decorations.js.map +1 -0
- package/dist/utils/monaco-walkeros-markers.d.ts +13 -0
- package/dist/utils/monaco-walkeros-markers.d.ts.map +1 -0
- package/dist/utils/monaco-walkeros-markers.js +69 -0
- package/dist/utils/monaco-walkeros-markers.js.map +1 -0
- package/dist/utils/monaco-walkeros-providers.d.ts +19 -0
- package/dist/utils/monaco-walkeros-providers.d.ts.map +1 -0
- package/dist/utils/monaco-walkeros-providers.js +284 -0
- package/dist/utils/monaco-walkeros-providers.js.map +1 -0
- package/dist/utils/path-analyzer.d.ts +88 -0
- package/dist/utils/path-analyzer.d.ts.map +1 -0
- package/dist/utils/path-analyzer.js +215 -0
- package/dist/utils/path-analyzer.js.map +1 -0
- package/package.json +6 -6
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Code } from './code';
|
|
3
|
+
/**
|
|
4
|
+
* Code - Monaco Editor atom component
|
|
5
|
+
*
|
|
6
|
+
* Pure Monaco editor without Box wrapper. This is the base atom that CodeBox uses.
|
|
7
|
+
* Supports syntax highlighting, auto-height, and various editor configurations.
|
|
8
|
+
*
|
|
9
|
+
* Note: For most use cases, use CodeBox (molecule) which includes header and actions.
|
|
10
|
+
*/
|
|
11
|
+
const meta = {
|
|
12
|
+
component: Code,
|
|
13
|
+
title: 'Atoms/Code',
|
|
14
|
+
tags: ['autodocs'],
|
|
15
|
+
parameters: {
|
|
16
|
+
layout: 'padded',
|
|
17
|
+
},
|
|
18
|
+
decorators: [
|
|
19
|
+
(Story) => (_jsx("div", { style: {
|
|
20
|
+
height: '300px',
|
|
21
|
+
display: 'flex',
|
|
22
|
+
flexDirection: 'column',
|
|
23
|
+
background: '#292d3e',
|
|
24
|
+
borderRadius: '8px',
|
|
25
|
+
}, children: _jsx(Story, {}) })),
|
|
26
|
+
],
|
|
27
|
+
};
|
|
28
|
+
export default meta;
|
|
29
|
+
const sampleCode = `const event = {
|
|
30
|
+
entity: 'product',
|
|
31
|
+
action: 'view',
|
|
32
|
+
data: {
|
|
33
|
+
id: 'P123',
|
|
34
|
+
name: 'Laptop',
|
|
35
|
+
price: 999
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
console.log('Event:', event);`;
|
|
40
|
+
/**
|
|
41
|
+
* Default code editor - fills parent container height
|
|
42
|
+
*
|
|
43
|
+
* The dashed border shows the parent container bounds.
|
|
44
|
+
* Code uses height="100%" by default, filling the available space.
|
|
45
|
+
*/
|
|
46
|
+
export const Default = {
|
|
47
|
+
args: {
|
|
48
|
+
code: sampleCode,
|
|
49
|
+
language: 'javascript',
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* With line numbers enabled
|
|
54
|
+
*/
|
|
55
|
+
export const WithLineNumbers = {
|
|
56
|
+
args: {
|
|
57
|
+
code: sampleCode,
|
|
58
|
+
language: 'javascript',
|
|
59
|
+
lineNumbers: true,
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* Auto-height mode - sizes to content
|
|
64
|
+
*
|
|
65
|
+
* Instead of filling the container, the editor sizes to fit its content.
|
|
66
|
+
* Useful for documentation and standalone code displays.
|
|
67
|
+
*/
|
|
68
|
+
export const AutoHeight = {
|
|
69
|
+
args: {
|
|
70
|
+
code: `import { elb } from '@walkeros/core';
|
|
71
|
+
|
|
72
|
+
elb('product view', { id: 'abc' });`,
|
|
73
|
+
language: 'typescript',
|
|
74
|
+
autoHeight: { min: 50, max: 400 },
|
|
75
|
+
},
|
|
76
|
+
decorators: [
|
|
77
|
+
(Story) => (_jsx("div", { style: {
|
|
78
|
+
display: 'flex',
|
|
79
|
+
flexDirection: 'column',
|
|
80
|
+
background: '#292d3e',
|
|
81
|
+
borderRadius: '8px',
|
|
82
|
+
}, children: _jsx(Story, {}) })),
|
|
83
|
+
],
|
|
84
|
+
};
|
|
85
|
+
const nestedCode = `{
|
|
86
|
+
"flows": {
|
|
87
|
+
"default": {
|
|
88
|
+
"sources": {
|
|
89
|
+
"browser": {
|
|
90
|
+
"package": "@walkeros/web-source-browser",
|
|
91
|
+
"config": {
|
|
92
|
+
"settings": {
|
|
93
|
+
"pageview": true,
|
|
94
|
+
"session": true,
|
|
95
|
+
"globals": {
|
|
96
|
+
"language": "en",
|
|
97
|
+
"currency": "USD"
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
"destinations": {
|
|
104
|
+
"ga4": {
|
|
105
|
+
"package": "@walkeros/web-destination-gtag",
|
|
106
|
+
"config": {
|
|
107
|
+
"settings": {
|
|
108
|
+
"measurementId": "G-XXXXXXXXXX"
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}`;
|
|
116
|
+
/**
|
|
117
|
+
* Sticky scroll disabled
|
|
118
|
+
*
|
|
119
|
+
* When sticky={false}, the nested context headers won't stick to the top when scrolling.
|
|
120
|
+
* Compare with default (sticky=true) to see the difference.
|
|
121
|
+
*/
|
|
122
|
+
export const NoStickyScroll = {
|
|
123
|
+
args: {
|
|
124
|
+
code: nestedCode,
|
|
125
|
+
language: 'json',
|
|
126
|
+
sticky: false,
|
|
127
|
+
},
|
|
128
|
+
};
|
|
129
|
+
const typescriptCode = `import { tagger } from '../walker';
|
|
130
|
+
|
|
131
|
+
function ProductDetail({ product }) {
|
|
132
|
+
return (
|
|
133
|
+
<div
|
|
134
|
+
{...tagger()
|
|
135
|
+
.entity('product')
|
|
136
|
+
.action('load', 'view')
|
|
137
|
+
.get()}
|
|
138
|
+
>
|
|
139
|
+
<h1>{product.name}</h1>
|
|
140
|
+
</div>
|
|
141
|
+
);
|
|
142
|
+
}`;
|
|
143
|
+
/**
|
|
144
|
+
* IDE mode ON - Full Monaco features
|
|
145
|
+
*
|
|
146
|
+
* Enable hover tooltips, validation decorations, and other IDE features.
|
|
147
|
+
* Use for interactive editors like playgrounds where feedback is useful.
|
|
148
|
+
*/
|
|
149
|
+
export const IdeOn = {
|
|
150
|
+
args: {
|
|
151
|
+
code: typescriptCode,
|
|
152
|
+
language: 'typescript',
|
|
153
|
+
ide: true,
|
|
154
|
+
},
|
|
155
|
+
};
|
|
156
|
+
//# sourceMappingURL=code.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code.stories.js","sourceRoot":"","sources":["../../../src/components/atoms/code.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B;;;;;;;GAOG;AACH,MAAM,IAAI,GAAsB;IAC9B,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;KACjB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cACE,KAAK,EAAE;gBACL,MAAM,EAAE,OAAO;gBACf,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,UAAU,EAAE,SAAS;gBACrB,YAAY,EAAE,KAAK;aACpB,YAED,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,UAAU,GAAG;;;;;;;;;;8BAUW,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,YAAY;QACtB,WAAW,EAAE,IAAI;KAClB;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE;;oCAE0B;QAChC,QAAQ,EAAE,YAAY;QACtB,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;KAClC;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,UAAU,EAAE,SAAS;gBACrB,YAAY,EAAE,KAAK;aACpB,YAED,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BjB,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,KAAK;KACd;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;;;;;;;;;;;;;EAarB,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,YAAY;QACtB,GAAG,EAAE,IAAI;KACV;CACF,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface FooterProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Footer - Footer atom component for boxes
|
|
8
|
+
*
|
|
9
|
+
* Provides a fixed-height footer area at the bottom of a box.
|
|
10
|
+
* Pairs with Header component for consistent box structure.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* <Box header="Preview">
|
|
14
|
+
* <Preview ... />
|
|
15
|
+
* <Footer>
|
|
16
|
+
* <ButtonGroup buttons={...} />
|
|
17
|
+
* </Footer>
|
|
18
|
+
* </Box>
|
|
19
|
+
*/
|
|
20
|
+
export declare function Footer({ children, className }: FooterProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
//# sourceMappingURL=footer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,WAAW,2CAE/D"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Footer - Footer atom component for boxes
|
|
4
|
+
*
|
|
5
|
+
* Provides a fixed-height footer area at the bottom of a box.
|
|
6
|
+
* Pairs with Header component for consistent box structure.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* <Box header="Preview">
|
|
10
|
+
* <Preview ... />
|
|
11
|
+
* <Footer>
|
|
12
|
+
* <ButtonGroup buttons={...} />
|
|
13
|
+
* </Footer>
|
|
14
|
+
* </Box>
|
|
15
|
+
*/
|
|
16
|
+
export function Footer({ children, className = '' }) {
|
|
17
|
+
return _jsx("div", { className: `elb-explorer-footer ${className}`, children: children });
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=footer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/components/atoms/footer.tsx"],"names":[],"mappings":";AAOA;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAe;IAC9D,OAAO,cAAK,SAAS,EAAE,uBAAuB,SAAS,EAAE,YAAG,QAAQ,GAAO,CAAC;AAC9E,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Footer } from './footer';
|
|
3
|
+
/**
|
|
4
|
+
* Footer - Footer component for boxes and panels
|
|
5
|
+
*
|
|
6
|
+
* Provides a fixed-height footer area at the bottom of a box.
|
|
7
|
+
* Pairs with Header for consistent box structure.
|
|
8
|
+
*/
|
|
9
|
+
declare const meta: Meta<typeof Footer>;
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof Footer>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const WithText: Story;
|
|
14
|
+
//# sourceMappingURL=footer.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Footer } from './footer';
|
|
3
|
+
import { ButtonGroup } from './button-group';
|
|
4
|
+
/**
|
|
5
|
+
* Footer - Footer component for boxes and panels
|
|
6
|
+
*
|
|
7
|
+
* Provides a fixed-height footer area at the bottom of a box.
|
|
8
|
+
* Pairs with Header for consistent box structure.
|
|
9
|
+
*/
|
|
10
|
+
const meta = {
|
|
11
|
+
title: 'Atoms/Footer',
|
|
12
|
+
component: Footer,
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
};
|
|
15
|
+
export default meta;
|
|
16
|
+
export const Default = {
|
|
17
|
+
args: {
|
|
18
|
+
children: (_jsx(ButtonGroup, { buttons: [
|
|
19
|
+
{ label: 'Cancel', value: 'cancel' },
|
|
20
|
+
{ label: 'Save', value: 'save', active: true },
|
|
21
|
+
], onButtonClick: () => { } })),
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
export const WithText = {
|
|
25
|
+
args: {
|
|
26
|
+
children: _jsx("span", { children: "Last saved: 2 minutes ago" }),
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=footer.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/atoms/footer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,KAAC,WAAW,IACV,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;gBACpC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE;aAC/C,EACD,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC,GACvB,CACH;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,QAAQ,EAAE,uDAAsC;KACjD;CACF,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface GridProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
columns?: number;
|
|
5
|
+
minBoxWidth?: number | string;
|
|
6
|
+
gap?: number | string;
|
|
7
|
+
rowHeight?: 'auto' | 'equal' | 'synced' | number;
|
|
8
|
+
maxRowHeight?: number | string | 'none';
|
|
9
|
+
showScrollButtons?: boolean;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Grid - Horizontal scrolling layout component for arranging boxes
|
|
14
|
+
*
|
|
15
|
+
* Provides consistent grid layout for box components with horizontal
|
|
16
|
+
* scrolling when content exceeds available space. Boxes maintain minimum
|
|
17
|
+
* width and never wrap to new rows.
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* // 5 boxes with default 350px minimum width
|
|
21
|
+
* <Grid columns={5}>
|
|
22
|
+
* <CodeBox ... />
|
|
23
|
+
* <CodeBox ... />
|
|
24
|
+
* <CodeBox ... />
|
|
25
|
+
* <CodeBox ... />
|
|
26
|
+
* <CodeBox ... />
|
|
27
|
+
* </Grid>
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* // Custom minimum box width
|
|
31
|
+
* <Grid columns={3} minBoxWidth={400}>
|
|
32
|
+
* <BrowserBox ... />
|
|
33
|
+
* <CodeBox ... />
|
|
34
|
+
* <CodeBox ... />
|
|
35
|
+
* </Grid>
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* // Custom row height
|
|
39
|
+
* <Grid columns={2} rowHeight={300}>
|
|
40
|
+
* <CodeBox ... />
|
|
41
|
+
* <CodeBox ... />
|
|
42
|
+
* </Grid>
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* // Auto row height (no minimum)
|
|
46
|
+
* <Grid columns={3} rowHeight="auto">
|
|
47
|
+
* <CodeBox ... />
|
|
48
|
+
* </Grid>
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* // Unlimited row height (no max constraint)
|
|
52
|
+
* <Grid columns={2} maxRowHeight="none">
|
|
53
|
+
* <PropertyTable ... />
|
|
54
|
+
* <CodeBox ... />
|
|
55
|
+
* </Grid>
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* // Custom max row height
|
|
59
|
+
* <Grid columns={2} maxRowHeight={800}>
|
|
60
|
+
* <PropertyTable ... />
|
|
61
|
+
* <CodeBox ... />
|
|
62
|
+
* </Grid>
|
|
63
|
+
*/
|
|
64
|
+
export declare function Grid({ children, columns, minBoxWidth, gap, rowHeight, maxRowHeight, showScrollButtons, className, }: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
65
|
+
//# sourceMappingURL=grid.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,GAAG,EACH,SAAmB,EACnB,YAAY,EACZ,iBAAwB,EACxB,SAAc,GACf,EAAE,SAAS,2CA+JX"}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, useEffect, useCallback, useMemo, } from 'react';
|
|
3
|
+
import { GridHeightContext, } from '../../contexts/GridHeightContext';
|
|
4
|
+
/**
|
|
5
|
+
* Grid - Horizontal scrolling layout component for arranging boxes
|
|
6
|
+
*
|
|
7
|
+
* Provides consistent grid layout for box components with horizontal
|
|
8
|
+
* scrolling when content exceeds available space. Boxes maintain minimum
|
|
9
|
+
* width and never wrap to new rows.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* // 5 boxes with default 350px minimum width
|
|
13
|
+
* <Grid columns={5}>
|
|
14
|
+
* <CodeBox ... />
|
|
15
|
+
* <CodeBox ... />
|
|
16
|
+
* <CodeBox ... />
|
|
17
|
+
* <CodeBox ... />
|
|
18
|
+
* <CodeBox ... />
|
|
19
|
+
* </Grid>
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* // Custom minimum box width
|
|
23
|
+
* <Grid columns={3} minBoxWidth={400}>
|
|
24
|
+
* <BrowserBox ... />
|
|
25
|
+
* <CodeBox ... />
|
|
26
|
+
* <CodeBox ... />
|
|
27
|
+
* </Grid>
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* // Custom row height
|
|
31
|
+
* <Grid columns={2} rowHeight={300}>
|
|
32
|
+
* <CodeBox ... />
|
|
33
|
+
* <CodeBox ... />
|
|
34
|
+
* </Grid>
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* // Auto row height (no minimum)
|
|
38
|
+
* <Grid columns={3} rowHeight="auto">
|
|
39
|
+
* <CodeBox ... />
|
|
40
|
+
* </Grid>
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* // Unlimited row height (no max constraint)
|
|
44
|
+
* <Grid columns={2} maxRowHeight="none">
|
|
45
|
+
* <PropertyTable ... />
|
|
46
|
+
* <CodeBox ... />
|
|
47
|
+
* </Grid>
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* // Custom max row height
|
|
51
|
+
* <Grid columns={2} maxRowHeight={800}>
|
|
52
|
+
* <PropertyTable ... />
|
|
53
|
+
* <CodeBox ... />
|
|
54
|
+
* </Grid>
|
|
55
|
+
*/
|
|
56
|
+
export function Grid({ children, columns, minBoxWidth, gap, rowHeight = 'equal', maxRowHeight, showScrollButtons = true, className = '', }) {
|
|
57
|
+
const gridRef = useRef(null);
|
|
58
|
+
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
59
|
+
const [canScrollRight, setCanScrollRight] = useState(false);
|
|
60
|
+
const [boxHeights, setBoxHeights] = useState(new Map());
|
|
61
|
+
const boxIdCounter = useRef(0);
|
|
62
|
+
const getBoxId = useCallback(() => boxIdCounter.current++, []);
|
|
63
|
+
const registerBox = useCallback((id, height) => {
|
|
64
|
+
setBoxHeights((prev) => {
|
|
65
|
+
const next = new Map(prev);
|
|
66
|
+
next.set(id, height);
|
|
67
|
+
return next;
|
|
68
|
+
});
|
|
69
|
+
}, []);
|
|
70
|
+
const unregisterBox = useCallback((id) => {
|
|
71
|
+
setBoxHeights((prev) => {
|
|
72
|
+
const next = new Map(prev);
|
|
73
|
+
next.delete(id);
|
|
74
|
+
return next;
|
|
75
|
+
});
|
|
76
|
+
}, []);
|
|
77
|
+
const syncedHeight = useMemo(() => {
|
|
78
|
+
if (rowHeight !== 'synced' || boxHeights.size === 0)
|
|
79
|
+
return null;
|
|
80
|
+
return Math.min(600, Math.max(...Array.from(boxHeights.values())));
|
|
81
|
+
}, [boxHeights, rowHeight]);
|
|
82
|
+
const contextValue = useMemo(() => ({
|
|
83
|
+
registerBox,
|
|
84
|
+
unregisterBox,
|
|
85
|
+
getBoxId,
|
|
86
|
+
syncedHeight,
|
|
87
|
+
enabled: rowHeight === 'synced',
|
|
88
|
+
}), [registerBox, unregisterBox, getBoxId, syncedHeight, rowHeight]);
|
|
89
|
+
const classNames = ['elb-explorer-grid'];
|
|
90
|
+
const gridStyle = {};
|
|
91
|
+
// Row height modifiers
|
|
92
|
+
if (rowHeight === 'auto') {
|
|
93
|
+
classNames.push('elb-explorer-grid--row-auto');
|
|
94
|
+
}
|
|
95
|
+
else if (rowHeight === 'equal') {
|
|
96
|
+
classNames.push('elb-explorer-grid--row-equal');
|
|
97
|
+
}
|
|
98
|
+
else if (rowHeight === 'synced') {
|
|
99
|
+
classNames.push('elb-explorer-grid--row-synced');
|
|
100
|
+
}
|
|
101
|
+
else if (typeof rowHeight === 'number') {
|
|
102
|
+
// Apply custom row height via CSS variable
|
|
103
|
+
gridStyle['--grid-row-min-height'] =
|
|
104
|
+
`${rowHeight}px`;
|
|
105
|
+
gridStyle['--grid-row-max-height'] =
|
|
106
|
+
`${rowHeight}px`;
|
|
107
|
+
}
|
|
108
|
+
// Add custom className
|
|
109
|
+
if (className) {
|
|
110
|
+
classNames.push(className);
|
|
111
|
+
}
|
|
112
|
+
// Apply custom gap if provided
|
|
113
|
+
if (gap !== undefined) {
|
|
114
|
+
gridStyle.gap = typeof gap === 'number' ? `${gap}px` : gap;
|
|
115
|
+
}
|
|
116
|
+
// Apply custom minimum box width if provided
|
|
117
|
+
if (minBoxWidth !== undefined) {
|
|
118
|
+
gridStyle['--grid-min-box-width'] =
|
|
119
|
+
typeof minBoxWidth === 'number' ? `${minBoxWidth}px` : minBoxWidth;
|
|
120
|
+
}
|
|
121
|
+
if (maxRowHeight !== undefined) {
|
|
122
|
+
// Warn about dangerous configuration that can cause infinite growth
|
|
123
|
+
gridStyle['--grid-row-max-height'] =
|
|
124
|
+
maxRowHeight === 'none'
|
|
125
|
+
? 'none'
|
|
126
|
+
: typeof maxRowHeight === 'number'
|
|
127
|
+
? `${maxRowHeight}px`
|
|
128
|
+
: maxRowHeight;
|
|
129
|
+
}
|
|
130
|
+
// Check scroll state
|
|
131
|
+
const updateScrollState = useCallback(() => {
|
|
132
|
+
const el = gridRef.current;
|
|
133
|
+
if (!el)
|
|
134
|
+
return;
|
|
135
|
+
const hasOverflow = el.scrollWidth > el.clientWidth;
|
|
136
|
+
const isAtStart = el.scrollLeft <= 1;
|
|
137
|
+
const isAtEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
|
|
138
|
+
setCanScrollLeft(hasOverflow && !isAtStart);
|
|
139
|
+
setCanScrollRight(hasOverflow && !isAtEnd);
|
|
140
|
+
}, []);
|
|
141
|
+
// Scroll handlers
|
|
142
|
+
const scrollLeft = () => {
|
|
143
|
+
if (!gridRef.current)
|
|
144
|
+
return;
|
|
145
|
+
const scrollAmount = gridRef.current.clientWidth * 0.8;
|
|
146
|
+
gridRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
|
|
147
|
+
};
|
|
148
|
+
const scrollRight = () => {
|
|
149
|
+
if (!gridRef.current)
|
|
150
|
+
return;
|
|
151
|
+
const scrollAmount = gridRef.current.clientWidth * 0.8;
|
|
152
|
+
gridRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
|
153
|
+
};
|
|
154
|
+
// Update scroll state on mount, scroll, and resize
|
|
155
|
+
useEffect(() => {
|
|
156
|
+
const el = gridRef.current;
|
|
157
|
+
if (!el || !showScrollButtons)
|
|
158
|
+
return;
|
|
159
|
+
updateScrollState();
|
|
160
|
+
el.addEventListener('scroll', updateScrollState);
|
|
161
|
+
window.addEventListener('resize', updateScrollState);
|
|
162
|
+
return () => {
|
|
163
|
+
el.removeEventListener('scroll', updateScrollState);
|
|
164
|
+
window.removeEventListener('resize', updateScrollState);
|
|
165
|
+
};
|
|
166
|
+
}, [updateScrollState, showScrollButtons]);
|
|
167
|
+
return (_jsx(GridHeightContext.Provider, { value: contextValue, children: _jsxs("div", { className: "elb-explorer elb-explorer-grid-wrapper", children: [showScrollButtons && canScrollLeft && (_jsx("button", { className: "elb-explorer-grid-scroll-button elb-explorer-grid-scroll-button--left", onClick: scrollLeft, "aria-label": "Scroll left", type: "button", children: "\u2039" })), _jsx("div", { ref: gridRef, className: classNames.join(' '), style: gridStyle, children: children }), showScrollButtons && canScrollRight && (_jsx("button", { className: "elb-explorer-grid-scroll-button elb-explorer-grid-scroll-button--right", onClick: scrollRight, "aria-label": "Scroll right", type: "button", children: "\u203A" }))] }) }));
|
|
168
|
+
}
|
|
169
|
+
//# sourceMappingURL=grid.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/atoms/grid.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Grid } from './grid';
|
|
3
|
+
/**
|
|
4
|
+
* Grid - Horizontal scrolling layout component
|
|
5
|
+
*
|
|
6
|
+
* Arranges Box components in a horizontal grid with optional scroll buttons.
|
|
7
|
+
* Supports various row height modes: auto, equal, synced, or fixed pixel value.
|
|
8
|
+
*/
|
|
9
|
+
declare const meta: Meta<typeof Grid>;
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof Grid>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const AutoHeight: Story;
|
|
14
|
+
export declare const EqualHeight: Story;
|
|
15
|
+
export declare const FixedHeight: Story;
|
|
16
|
+
export declare const CustomGap: Story;
|
|
17
|
+
export declare const NoScrollButtons: Story;
|
|
18
|
+
//# sourceMappingURL=grid.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAW3B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Grid } from './grid';
|
|
3
|
+
import { Box } from './box';
|
|
4
|
+
/**
|
|
5
|
+
* Grid - Horizontal scrolling layout component
|
|
6
|
+
*
|
|
7
|
+
* Arranges Box components in a horizontal grid with optional scroll buttons.
|
|
8
|
+
* Supports various row height modes: auto, equal, synced, or fixed pixel value.
|
|
9
|
+
*/
|
|
10
|
+
const meta = {
|
|
11
|
+
title: 'Atoms/Grid',
|
|
12
|
+
component: Grid,
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
decorators: [
|
|
15
|
+
(Story) => (_jsx("div", { style: { width: '100%', maxWidth: '1200px' }, children: _jsx(Story, {}) })),
|
|
16
|
+
],
|
|
17
|
+
};
|
|
18
|
+
export default meta;
|
|
19
|
+
export const Default = {
|
|
20
|
+
args: {
|
|
21
|
+
columns: 3,
|
|
22
|
+
children: (_jsxs(_Fragment, { children: [_jsx(Box, { header: "Box 1", children: "Content for box 1" }), _jsx(Box, { header: "Box 2", children: "Content for box 2" }), _jsx(Box, { header: "Box 3", children: "Content for box 3" })] })),
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
export const AutoHeight = {
|
|
26
|
+
args: {
|
|
27
|
+
columns: 2,
|
|
28
|
+
rowHeight: 'auto',
|
|
29
|
+
children: (_jsxs(_Fragment, { children: [_jsx(Box, { header: "Short", children: "Short content" }), _jsxs(Box, { header: "Tall", children: [_jsx("div", { children: "Line 1" }), _jsx("div", { children: "Line 2" }), _jsx("div", { children: "Line 3" }), _jsx("div", { children: "Line 4" })] })] })),
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
export const EqualHeight = {
|
|
33
|
+
args: {
|
|
34
|
+
columns: 3,
|
|
35
|
+
rowHeight: 'equal',
|
|
36
|
+
children: (_jsxs(_Fragment, { children: [_jsx(Box, { header: "Box A", children: "Short" }), _jsxs(Box, { header: "Box B", children: [_jsx("div", { children: "Tall content" }), _jsx("div", { children: "More lines" }), _jsx("div", { children: "Even more" })] }), _jsx(Box, { header: "Box C", children: "Medium" })] })),
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
export const FixedHeight = {
|
|
40
|
+
args: {
|
|
41
|
+
columns: 2,
|
|
42
|
+
rowHeight: 200,
|
|
43
|
+
children: (_jsxs(_Fragment, { children: [_jsx(Box, { header: "Fixed 200px", children: "Content fits in 200px height" }), _jsx(Box, { header: "Also 200px", children: "Same height regardless of content" })] })),
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
export const CustomGap = {
|
|
47
|
+
args: {
|
|
48
|
+
columns: 3,
|
|
49
|
+
gap: 32,
|
|
50
|
+
children: (_jsxs(_Fragment, { children: [_jsx(Box, { header: "Wide Gap", children: "32px gap between boxes" }), _jsx(Box, { header: "Box 2", children: "Content" }), _jsx(Box, { header: "Box 3", children: "Content" })] })),
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
export const NoScrollButtons = {
|
|
54
|
+
args: {
|
|
55
|
+
columns: 2,
|
|
56
|
+
showScrollButtons: false,
|
|
57
|
+
children: (_jsxs(_Fragment, { children: [_jsx(Box, { header: "No Buttons", children: "Scroll buttons hidden" }), _jsx(Box, { header: "Box 2", children: "Content" })] })),
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=grid.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.stories.js","sourceRoot":"","sources":["../../../src/components/atoms/grid.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B;;;;;GAKG;AACH,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAC/C,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,CACR,8BACE,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,kCAAwB,EAC3C,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,kCAAwB,EAC3C,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,kCAAwB,IAC1C,CACJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,CACR,8BACE,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,8BAAoB,EACvC,MAAC,GAAG,IAAC,MAAM,EAAC,MAAM,aAChB,mCAAiB,EACjB,mCAAiB,EACjB,mCAAiB,EACjB,mCAAiB,IACb,IACL,CACJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,CACR,8BACE,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,sBAAY,EAC/B,MAAC,GAAG,IAAC,MAAM,EAAC,OAAO,aACjB,yCAAuB,EACvB,uCAAqB,EACrB,sCAAoB,IAChB,EACN,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,uBAAa,IAC/B,CACJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,GAAG;QACd,QAAQ,EAAE,CACR,8BACE,KAAC,GAAG,IAAC,MAAM,EAAC,aAAa,6CAAmC,EAC5D,KAAC,GAAG,IAAC,MAAM,EAAC,YAAY,kDAAwC,IAC/D,CACJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,CACR,8BACE,KAAC,GAAG,IAAC,MAAM,EAAC,UAAU,uCAA6B,EACnD,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,wBAAc,EACjC,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,wBAAc,IAChC,CACJ;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,iBAAiB,EAAE,KAAK;QACxB,QAAQ,EAAE,CACR,8BACE,KAAC,GAAG,IAAC,MAAM,EAAC,YAAY,sCAA4B,EACpD,KAAC,GAAG,IAAC,MAAM,EAAC,OAAO,wBAAc,IAChC,CACJ;KACF;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,WAAW,2CAOtD"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export function Header({ label, children }) {
|
|
3
|
+
return (_jsxs("div", { className: "elb-explorer-header", children: [_jsx("span", { className: "elb-explorer-label", children: label }), children] }));
|
|
4
|
+
}
|
|
5
|
+
//# sourceMappingURL=header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/atoms/header.tsx"],"names":[],"mappings":";AAOA,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAe;IACrD,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,eAAM,SAAS,EAAC,oBAAoB,YAAE,KAAK,GAAQ,EAClD,QAAQ,IACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Header } from './header';
|
|
3
|
+
/**
|
|
4
|
+
* Header - Header component for boxes and panels
|
|
5
|
+
*
|
|
6
|
+
* Displays a label with optional action buttons.
|
|
7
|
+
* Pairs with Footer for consistent box structure.
|
|
8
|
+
*/
|
|
9
|
+
declare const meta: Meta<typeof Header>;
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof Header>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const WithButtons: Story;
|
|
14
|
+
export declare const WithSingleButton: Story;
|
|
15
|
+
//# sourceMappingURL=header.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC"}
|