diff --git a/.github/configs/draft-release.yml b/.github/configs/draft-release.yml index b28f93a..7f704b9 100644 --- a/.github/configs/draft-release.yml +++ b/.github/configs/draft-release.yml @@ -32,7 +32,7 @@ version-resolver: - 'refactor' default: patch template: | - ## Changes within UI Kit + ## Changes within UI Library $CHANGES diff --git a/.github/workflows/draft-next-release.yml b/.github/workflows/draft-next-release.yml index 22c8366..bce0ae2 100644 --- a/.github/workflows/draft-next-release.yml +++ b/.github/workflows/draft-next-release.yml @@ -13,7 +13,7 @@ on: jobs: draft_release: - name: 'Draft UI Kit release' + name: 'Draft UI Library release' permissions: contents: write pull-requests: write diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 5d4a6ca..ed8d8aa 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -1,4 +1,4 @@ -name: Publish UI Kit to GitHub Packages +name: Publish UI Library to GitHub Packages on: release: diff --git a/README.md b/README.md index a3eeff3..fe0cae1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# UI Kit +# UI Library -The HiveMQ UI Kit provides components on top of Chakra UI for various applications. +The HiveMQ UI Library provides components on top of Chakra UI for various applications. ## Development diff --git a/src/docs/Demo.mdx b/src/docs/Demo.mdx index a0b80b0..3a244f6 100644 --- a/src/docs/Demo.mdx +++ b/src/docs/Demo.mdx @@ -6,15 +6,15 @@ import SimpleImplementation from './cookbook/SimpleImplementation?raw'; -# HiveMQ UI Kit 🐚 +# HiveMQ UI Library 🐚 -The HiveMQ UI Kit is a template that frames the content of a page. +The HiveMQ UI Library is a template that frames the content of a page. It provides the most basic elements required to build a HiveMQ Application, such as the header, sidebar navigation, and overlays. ## Installation -The HiveMQ UI Kit is available as an npm package in the GitHub Package Registry. +The HiveMQ UI Library is available as an npm package in the GitHub Package Registry. For that you need to generate a personal access token with the `read:packages` scope. See [Authenticating to GitHub Packages](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-to-github-packages) for more information. @@ -34,11 +34,11 @@ npm install @hivemq/ui-library ## Cookbooks Let's get started with maximum speed you can ether use the [interactive demo](/?path=/story/demo-interactive--primary) -or follow the steps below to add the UI Kit to your project. +or follow the steps below to add the UI Library to your project. ## Demo -Checkout the [interactive demo](/?path=/story/demo-interactive--primary) below to see the UI Kit in action. +Checkout the [interactive demo](/?path=/story/demo-interactive--primary) below to see the UI Library in action. diff --git a/src/docs/cookbook/FullDemo.tsx b/src/docs/cookbook/FullDemo.tsx index 903c470..fa95031 100644 --- a/src/docs/cookbook/FullDemo.tsx +++ b/src/docs/cookbook/FullDemo.tsx @@ -171,7 +171,7 @@ export function FullDemo() { - This is a full demo of the HiveMQ UI Kit. You can interact with the sidebar to change + This is a full demo of the HiveMQ UI Library. You can interact with the sidebar to change the active item. diff --git a/src/lib.ts b/src/lib.ts index 52ec238..50bb519 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -2,6 +2,7 @@ export * from './modules/Shell' export * from './modules/Content' export * from './modules/Header' export * from './modules/Sidebar' +export * from './modules/Buttons' // TODO make it a hook `useShellContext` export { diff --git a/src/modules/Buttons/IconButtonWithTooltip.tsx b/src/modules/Buttons/IconButtonWithTooltip.tsx new file mode 100644 index 0000000..51c7533 --- /dev/null +++ b/src/modules/Buttons/IconButtonWithTooltip.tsx @@ -0,0 +1,15 @@ +import { FC } from 'react' +import { IconButtonProps, TooltipProps, Tooltip, IconButton as CuiIconButton } from '@chakra-ui/react' + +export interface IconButtonWithTooltipProps extends Omit { + icon: React.ReactElement + tooltipProps?: Omit +} + +export const IconButtonWithTooltip: FC = ({ 'aria-label': ariaLabel, tooltipProps, ...props }) => { + return ( + + + + ) +} diff --git a/src/modules/Buttons/index.ts b/src/modules/Buttons/index.ts new file mode 100644 index 0000000..714f413 --- /dev/null +++ b/src/modules/Buttons/index.ts @@ -0,0 +1,5 @@ +export { + IconButtonWithTooltip, + type IconButtonWithTooltipProps +} from './IconButtonWithTooltip' + diff --git a/src/modules/Content/index.ts b/src/modules/Content/index.ts index b3b337e..dbc0ef1 100644 --- a/src/modules/Content/index.ts +++ b/src/modules/Content/index.ts @@ -8,7 +8,7 @@ export const Content = { */ Base: ContentRoot, /** - * Root element for the UI Kit content that positions the HTML element on the grid and provides + * Root element for the UI Library content that positions the HTML element on the grid and provides * @requires Shell.Root - As the parent element that provides the layout / context for the Content.Root */ Root: ContentRoot, diff --git a/src/modules/Shell/index.ts b/src/modules/Shell/index.ts index 38d25df..4807a47 100644 --- a/src/modules/Shell/index.ts +++ b/src/modules/Shell/index.ts @@ -2,7 +2,7 @@ import { ShellContainer, ShellProvider, ShellRoot } from './ShellRoot' export const Shell = { /** - * Provider for the entire UI Kit this should be at the top of all elements, + * Provider for the entire UI Shell this should be at the top of all elements, * even above `Shell.Root` * * @deprecated use `Shell.Root` instead since it provides functionality for both `Shell.Provider` and `Shell.Container`