From bcb16f0fc401ab823d7bd1c4dd592b798c3fc256 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 31 Oct 2021 21:29:07 +0000 Subject: [PATCH] chore: update README --- README.md | 77 ++++++++++++++++++------------------- packages/dockview/README.md | 77 ++++++++++++++++++------------------- 2 files changed, 74 insertions(+), 80 deletions(-) diff --git a/README.md b/README.md index dc4f860ec..2ce6f4895 100644 --- a/README.md +++ b/README.md @@ -9,20 +9,20 @@ [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview) [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) -[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/dashboard?id=mathuo_dockview) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/dashboard?id=mathuo_dockview) +[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) [![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview) ## A zero dependency layout manager based on the layering of splitview with support for ReactJS components, written in TypeScript. -- Live demo [➡️](https://mathuo.github.io/dockview/) -- Storybook demo [➡️](https://mathuo.github.io/dockview/output/storybook-static) -- Code examples [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) -- Generated TypeDocs [➡️](https://mathuo.github.io/dockview/output/docs/index.html) +- [➡️](https://mathuo.github.io/dockview/) Live demo +- [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo +- [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples +- [➡️](https://mathuo.github.io/dockview/output/docs/index.html) Generated TypeDocs -Want to inspect the latest deployement? Go to https://unpkg.com/browse/dockview@latest/ +Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/ ## Features @@ -47,7 +47,7 @@ This project was inspired by many popular IDE editors. Some parts of the core re ## Quick start -You can install the project from [npm](https://www.npmjs.com/package/dockview). +Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview). ``` npm install --save dockview @@ -62,11 +62,9 @@ Within your project you must import or reference the stylesheet at `dockview/dis You should also attach a dockview theme to an element containing your components. For example: ```html - + ``` -dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0` which is the version that introduced [React Hooks](https://reactjs.org/docs/hooks-intro.html). - ## Sandbox examples - [Dockview](https://codesandbox.io/s/simple-dockview-t6491) @@ -84,35 +82,34 @@ See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d). The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme. -| CSS Property | Description | -| ------------------------------------------------ | ------------------------------------------------------------------------------------- | -| **General** | -| --dv-active-sash-color | The background color a dividing sash during an interaction | -| --dv-separator-border | The color of the seperator between panels | -| **Paneview** | -| --dv-paneview-header-border-color | - | -| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews | -| **Dockview -> Dragging** | -| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over | -| **Dockview -> Tabs container** | -| --dv-tabs-and-actions-container-font-size | - | -| --dv-tabs-and-actions-container-height | Default tab height | -| --dv-tabs-and-actions-container-background-color | - | -| --dv-tabs-container-scrollbar-color | - | -| --dv-group-view-background-color | - | - -| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) -| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group | -| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group | -| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group | -| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group | -| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group | -| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group | -| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group | -| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group | -| --dv-tab-divider-color | - | -| --dv-tab-close-icon | Default tab close icon | -| --dv-tab-dirty-icon | Default tab dirty icon | +| CSS Property | Description | +| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| **General** | +| --dv-active-sash-color | The background color a dividing sash during an interaction | +| --dv-separator-border | The color of the seperator between panels | +| **Paneview** | +| --dv-paneview-header-border-color | - | +| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews | +| **Dockview -> Dragging** | +| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over | +| **Dockview -> Tabs container** | +| --dv-tabs-and-actions-container-font-size | - | +| --dv-tabs-and-actions-container-height | Default tab height | +| --dv-tabs-and-actions-container-background-color | - | +| --dv-tabs-container-scrollbar-color | - | +| --dv-group-view-background-color | - | +| **Dockview -> Tabs** | (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) | +| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group | +| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group | +| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group | +| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group | +| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group | +| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group | +| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group | +| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group | +| --dv-tab-divider-color | - | +| --dv-tab-close-icon | Default tab close icon | +| --dv-tab-dirty-icon | Default tab dirty icon | ## Performance diff --git a/packages/dockview/README.md b/packages/dockview/README.md index dc4f860ec..2ce6f4895 100644 --- a/packages/dockview/README.md +++ b/packages/dockview/README.md @@ -9,20 +9,20 @@ [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview) [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) -[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/dashboard?id=mathuo_dockview) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/dashboard?id=mathuo_dockview) +[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) [![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview) ## A zero dependency layout manager based on the layering of splitview with support for ReactJS components, written in TypeScript. -- Live demo [➡️](https://mathuo.github.io/dockview/) -- Storybook demo [➡️](https://mathuo.github.io/dockview/output/storybook-static) -- Code examples [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) -- Generated TypeDocs [➡️](https://mathuo.github.io/dockview/output/docs/index.html) +- [➡️](https://mathuo.github.io/dockview/) Live demo +- [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo +- [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples +- [➡️](https://mathuo.github.io/dockview/output/docs/index.html) Generated TypeDocs -Want to inspect the latest deployement? Go to https://unpkg.com/browse/dockview@latest/ +Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/ ## Features @@ -47,7 +47,7 @@ This project was inspired by many popular IDE editors. Some parts of the core re ## Quick start -You can install the project from [npm](https://www.npmjs.com/package/dockview). +Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview). ``` npm install --save dockview @@ -62,11 +62,9 @@ Within your project you must import or reference the stylesheet at `dockview/dis You should also attach a dockview theme to an element containing your components. For example: ```html - + ``` -dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0` which is the version that introduced [React Hooks](https://reactjs.org/docs/hooks-intro.html). - ## Sandbox examples - [Dockview](https://codesandbox.io/s/simple-dockview-t6491) @@ -84,35 +82,34 @@ See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d). The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme. -| CSS Property | Description | -| ------------------------------------------------ | ------------------------------------------------------------------------------------- | -| **General** | -| --dv-active-sash-color | The background color a dividing sash during an interaction | -| --dv-separator-border | The color of the seperator between panels | -| **Paneview** | -| --dv-paneview-header-border-color | - | -| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews | -| **Dockview -> Dragging** | -| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over | -| **Dockview -> Tabs container** | -| --dv-tabs-and-actions-container-font-size | - | -| --dv-tabs-and-actions-container-height | Default tab height | -| --dv-tabs-and-actions-container-background-color | - | -| --dv-tabs-container-scrollbar-color | - | -| --dv-group-view-background-color | - | - -| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) -| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group | -| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group | -| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group | -| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group | -| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group | -| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group | -| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group | -| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group | -| --dv-tab-divider-color | - | -| --dv-tab-close-icon | Default tab close icon | -| --dv-tab-dirty-icon | Default tab dirty icon | +| CSS Property | Description | +| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| **General** | +| --dv-active-sash-color | The background color a dividing sash during an interaction | +| --dv-separator-border | The color of the seperator between panels | +| **Paneview** | +| --dv-paneview-header-border-color | - | +| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews | +| **Dockview -> Dragging** | +| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over | +| **Dockview -> Tabs container** | +| --dv-tabs-and-actions-container-font-size | - | +| --dv-tabs-and-actions-container-height | Default tab height | +| --dv-tabs-and-actions-container-background-color | - | +| --dv-tabs-container-scrollbar-color | - | +| --dv-group-view-background-color | - | +| **Dockview -> Tabs** | (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) | +| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group | +| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group | +| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group | +| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group | +| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group | +| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group | +| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group | +| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group | +| --dv-tab-divider-color | - | +| --dv-tab-close-icon | Default tab close icon | +| --dv-tab-dirty-icon | Default tab dirty icon | ## Performance