diff --git a/README.md b/README.md index 941b705..fc31c09 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# NPM packages +# Business packages -Packages to use across projects. +NPM packages for the Business Suite for Grafana. ## Install all packages @@ -10,10 +10,27 @@ Run the command in the root folder to install all packages npm install ``` -## Add npm package +## Install a specific package Install npm or local package for the workspace ``` npm i [package] -w [local-package] ``` + +## Business Suite for Grafana + +The Business Suite is a collection of open source plugins created and actively maintained by Volkov Labs. + +The collection aims to solve the most frequent business tasks by providing an intuitive interface with detailed written documentation, examples, and video tutorials. + +[![Business Suite for Grafana](https://raw.githubusercontent.com/VolkovLabs/.github/main/business.png)](https://volkovlabs.io/plugins/) + +## Feedback + +We're looking forward to hearing from you. You can use different ways to get in touch with us. + +- Ask a question, request a new feature, or report an issue at [GitHub issues](https://github.com/volkovlabs/business-packages/issues). +- Subscribe to our [YouTube Channel](https://www.youtube.com/@volkovlabs) and leave your comments. +- Sponsor our open-source plugins for Grafana at [GitHub Sponsor](https://github.com/sponsors/VolkovLabs). +- Support our project by starring the repository. diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index adf3712..09726ab 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,11 +1,18 @@ # Change Log -## 3.0.0 (2024-09-20) +## 3.2.0 (2024-09-20) ### Features / Enhancements - Added disabled state to Collapse component (#65) +## 3.1.0 (2024-09-13) + +### Features / Enhancements + +- Updated wrap button to indicate state (#64) +- Added button for the mini map (#64) + ## 3.0.0 (2024-09-11) ### Features / Enhancements diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx index 8f115a5..1a8df3e 100644 --- a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx +++ b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx @@ -246,6 +246,49 @@ describe('AutosizeCodeEditor', () => { expect(onEditorDidMount).toHaveBeenCalledTimes(4); }); + it('Should render mini map button and show/hide map', async () => { + const onChange = jest.fn(); + const onEditorDidMount = jest.fn(); + + render(getComponent({ onEditorDidMount, onChange })); + + /** + * Check paste button + */ + expect(selectors.miniMapButton()).toBeInTheDocument(); + + /** + * Check tooltip via aria-label + */ + expect(selectors.miniMapButton()).toHaveAttribute('aria-label', 'Show mini map'); + + expect(onEditorDidMount).toHaveBeenCalledTimes(2); + + act(() => fireEvent.click(selectors.miniMapButton())); + + /** + * Call onEditorDidMount after set state + */ + expect(onEditorDidMount).toHaveBeenCalledTimes(3); + + /** + * Check tooltip via aria-label + */ + expect(selectors.miniMapButton()).toHaveAttribute('aria-label', 'Hide mini map'); + + act(() => fireEvent.click(selectors.miniMapButton())); + + /** + * Check tooltip via aria-label + */ + expect(selectors.miniMapButton()).toHaveAttribute('aria-label', 'Show mini map'); + + /** + * Call onEditorDidMount after set state + */ + expect(onEditorDidMount).toHaveBeenCalledTimes(4); + }); + it('Should open/close modal on toolbar button', async () => { const onChange = jest.fn(); const onEditorDidMount = jest.fn(); diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx index 36d6d28..6f27b03 100644 --- a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx +++ b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx @@ -56,6 +56,7 @@ export const AutosizeCodeEditor: React.FC = ({ modalButtonTooltip, onEditorDidMount, monacoOptions, + showMiniMap, ...restProps }) => { /** @@ -67,9 +68,11 @@ export const AutosizeCodeEditor: React.FC = ({ * State */ const [isOpen, setIsOpen] = useState(false); + const [isShowMiniMap, setIsShowMiniMap] = useState(showMiniMap); + const [currentMonacoOptions, setCurrentMonacoOptions] = useState(monacoOptions); const [monacoEditor, setMonacoEditor] = useState(null); const [monacoEditorModal, setMonacoEditorModal] = useState(null); - const [currentMonacoOptions, setCurrentMonacoOptions] = useState(monacoOptions); + /** * Height */ @@ -125,22 +128,25 @@ export const AutosizeCodeEditor: React.FC = ({ return ( <> { onChange?.(value); setHeight(getHeightByValue(value, minHeight, maxHeight)); }} - height={staticHeight ?? height} - onEditorDidMount={onEditorDidMountMain} - monacoOptions={currentMonacoOptions} {...restProps} /> @@ -156,23 +162,25 @@ export const AutosizeCodeEditor: React.FC = ({
{ onChange?.(value); setHeight(getHeightByValue(value, minHeight, maxHeight)); }} - containerStyles={styles.modalEditor} - onEditorDidMount={modalEditorDidMount} - monacoOptions={currentMonacoOptions} {...restProps} />
diff --git a/packages/components/src/components/AutosizeCodeEditor/Toolbar.tsx b/packages/components/src/components/AutosizeCodeEditor/Toolbar.tsx index 4eed10f..b0e8030 100644 --- a/packages/components/src/components/AutosizeCodeEditor/Toolbar.tsx +++ b/packages/components/src/components/AutosizeCodeEditor/Toolbar.tsx @@ -64,6 +64,20 @@ type Props = { * @type {React.Dispatch>} */ setCurrentMonacoOptions: React.Dispatch>; + + /** + * Show mini map + * + * @type {boolean} + */ + isShowMiniMap?: boolean; + + /** + * Set show mini map + * + * @type {React.Dispatch>} + */ + setIsShowMiniMap: React.Dispatch>; }; /** @@ -77,6 +91,8 @@ export const Toolbar: React.FC = ({ isModal = false, setCurrentMonacoOptions, currentMonacoOptions, + isShowMiniMap, + setIsShowMiniMap, }) => { /** * Styles and Theme @@ -179,6 +195,7 @@ export const Toolbar: React.FC = ({ tooltip="Wrap code on new lines" icon="wrap-text" iconSize="lg" + variant={currentMonacoOptions?.wordWrap === 'on' ? 'active' : 'default'} onClick={() => { const wrapCode = currentMonacoOptions?.wordWrap === 'on' ? 'off' : 'on'; setCurrentMonacoOptions({ @@ -188,6 +205,16 @@ export const Toolbar: React.FC = ({ }} {...TEST_IDS.codeEditor.wrapButton.apply()} /> + { + setIsShowMiniMap((prev) => !prev); + }} + {...TEST_IDS.codeEditor.miniMapButton.apply()} + /> ); }; diff --git a/packages/components/src/constants/tests.ts b/packages/components/src/constants/tests.ts index e52379e..bdbccc9 100644 --- a/packages/components/src/constants/tests.ts +++ b/packages/components/src/constants/tests.ts @@ -26,6 +26,7 @@ export const TEST_IDS = { copyButton: createSelector(() => `data-testid code-editor copy-button`), copyPasteText: createSelector(() => `data-testid code-editor copy-paste-text`), modal: createSelector(() => `data-testid code-editor modal-window`), + miniMapButton: createSelector(() => `data-testid code-editor mini-map-button`), modalButton: createSelector((name: unknown) => `data-testid code-editor modal-button-${name}`), pasteButton: createSelector(() => `data-testid code-editor paste-button`), wrapButton: createSelector(() => `data-testid code-editor wrap-button`),