From 2d7d3a0df5db2e3dd7d63f318d767a9da383b75a Mon Sep 17 00:00:00 2001 From: vitiacat Date: Fri, 20 Dec 2024 10:08:03 +0300 Subject: [PATCH 1/5] fix: modals uses global close function & removed console.log --- packages/base/src/adaptive/AdaptiveResolver.ts | 2 -- packages/modals/src/useModals.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/base/src/adaptive/AdaptiveResolver.ts b/packages/base/src/adaptive/AdaptiveResolver.ts index ebebedc9..4d2dc7df 100644 --- a/packages/base/src/adaptive/AdaptiveResolver.ts +++ b/packages/base/src/adaptive/AdaptiveResolver.ts @@ -64,7 +64,5 @@ export function resolveAdaptiveProps( } } - console.log(object, result) - return result } \ No newline at end of file diff --git a/packages/modals/src/useModals.tsx b/packages/modals/src/useModals.tsx index 89bd8ddb..86d771bc 100644 --- a/packages/modals/src/useModals.tsx +++ b/packages/modals/src/useModals.tsx @@ -130,7 +130,7 @@ export const useModals = (defaultOptions: ModalOptions = {}) ref={scrimRef} posA={0} overflow="visible" - onClick={cancelable ? close: undefined} + onClick={cancelable ? modalDialogInterface.close: undefined} /> Date: Tue, 31 Dec 2024 13:09:55 +0300 Subject: [PATCH 2/5] chore(Checkbox): Allow optional additional props style: Added disabled state to Checkbox, Radio, Slider fix(Switch): Fixed disabled state docs: Added components to "Selection" and "Navigation" category --- packages/checkbox/src/Checkbox.md | 26 ++++++++++++--- packages/checkbox/src/Checkbox.tsx | 20 ++++++----- packages/menu/src/Menu/Menu.md | 13 +++++++- packages/navigation-bar/src/NavigationBar.md | 10 ++++++ .../navigation-rail/src/NavigationRail.md | 10 ++++++ packages/radio/src/Radio.md | 11 +++++++ packages/radio/src/Radio.tsx | 9 +++-- packages/slider/src/Slider.md | 12 +++++++ packages/slider/src/Slider.tsx | 20 ++++++++--- packages/switch/src/Switch.md | 10 ++++++ packages/switch/src/Switch.tsx | 33 ++++++++----------- .../src/pages/ComponentPage/ComponentPage.tsx | 2 +- .../ComponentsPage/ComponentsOverviewPage.tsx | 6 ++-- styleguide/src/pages/hooks/HooksPage.tsx | 2 +- 14 files changed, 138 insertions(+), 46 deletions(-) diff --git a/packages/checkbox/src/Checkbox.md b/packages/checkbox/src/Checkbox.md index 126a1874..d6b69d26 100644 --- a/packages/checkbox/src/Checkbox.md +++ b/packages/checkbox/src/Checkbox.md @@ -1,8 +1,18 @@ +``` +{ + "category": "selection", + "type": "Checkboxes", + "description": "Checkboxes let users select one or more items from a list, or turn an item on or off", + "background": "https://lh3.googleusercontent.com/3pONGTFiKHeHqRQvp4qt0epYpDyXQiA51Nt1wFPcwcro56d8FHGjz3vw_qaW2pCqlGjbpnAFXWXekmUXMDN8oyMdRg9LsmPVTLjDzRcOLc4jnbY5-e3S=w1200-rj", + "foreground": "https://lh3.googleusercontent.com/zOx9Zje5zHZLa1yf-6XBNC_7YfdS7lmqUtjec7Soe8NIdy1FeOrfvrFuPWx7i2ywt_YlQCjkPIOo-MwOt01VVPZZLXc8DNO2o9CoCHHwrvSIW_GpvGNk=w2400" +} +``` + ```tsx import React from "react"; import {VStack, HStack, Checkbox} from "@znui/react"; -const [checkedItems, setCheckedItems] = React.useState([false, false]); +const [checkedItems, setCheckedItems] = React.useState([false, false, false]); const allChecked = checkedItems.every(Boolean); const isIndeterminate = checkedItems.some(Boolean) && !allChecked; @@ -11,14 +21,14 @@ const isIndeterminate = checkedItems.some(Boolean) && !allChecked; setCheckedItems([e.target.checked, e.target.checked])} + onChange={(e) => setCheckedItems([e.target.checked, e.target.checked, e.target.checked])} > Parent setCheckedItems([e.target.checked, checkedItems[1]])} + onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1], checkedItems[2]])} > Child @@ -26,7 +36,15 @@ const isIndeterminate = checkedItems.some(Boolean) && !allChecked; setCheckedItems([checkedItems[0], e.target.checked])} + onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked, checkedItems[2]])} + > + Child + + + setCheckedItems([checkedItems[0], checkedItems[1], e.target.checked])} > Child diff --git a/packages/checkbox/src/Checkbox.tsx b/packages/checkbox/src/Checkbox.tsx index 34f6e709..51a0e512 100644 --- a/packages/checkbox/src/Checkbox.tsx +++ b/packages/checkbox/src/Checkbox.tsx @@ -6,10 +6,10 @@ import {znui} from "@znui/base"; import {Body} from "@znui/typography"; export interface CheckboxProps extends FormWidgetBaseProps { - uncheckedColor: FormWidgetBaseProps['color'] - checkedColor: FormWidgetBaseProps['color'] - error: boolean - indeterminate: boolean + uncheckedColor?: FormWidgetBaseProps['color'] + checkedColor?: FormWidgetBaseProps['color'] + error?: boolean + indeterminate?: boolean } const checkedPath = "M 7.4 11 L 10 13.6 L 16.6 7 L 18 8.4 L 10 16.4 L 10 16.4 L 6 12.4 L 7.4 11" @@ -22,12 +22,13 @@ export const Checkbox = React.forwardRef( (props: CheckboxProps, inputRef: React.ForwardedRef) => { const { checked, - indeterminate, + indeterminate = false, uncheckedColor = ThemeTokens.onSurfaceVariant, checkedColor = ThemeTokens.primary, shapeScale = 'esm', - error, + error = false, children, + disabled, ...otherProps } = props @@ -36,6 +37,7 @@ export const Checkbox = React.forwardRef( return @@ -49,8 +51,8 @@ export const Checkbox = React.forwardRef( boxSizing='border-box' borderWidth={2} to={{ - borderColor: error ? ThemeTokens.error : (oneOfChecked ? checkedColor : uncheckedColor), - background: oneOfChecked ? (error ? ThemeTokens.error: checkedColor) : 'transparent' + borderColor: disabled ? ThemeTokens.onSurface : error ? ThemeTokens.error : (oneOfChecked ? checkedColor : uncheckedColor), + background: oneOfChecked ? (disabled ? ThemeTokens.onSurface : error ? ThemeTokens.error : checkedColor) : 'transparent' }} > + fill={disabled ? ThemeTokens.surface : ThemeTokens.onPrimary}/> diff --git a/packages/menu/src/Menu/Menu.md b/packages/menu/src/Menu/Menu.md index 35f5f122..7cefaf40 100644 --- a/packages/menu/src/Menu/Menu.md +++ b/packages/menu/src/Menu/Menu.md @@ -1,6 +1,17 @@ +``` +{ + "category": "selection", + "type": "Menus", + "visibleName": "Menu", + "description": "Menus display a list of choices on a temporary surface", + "background": "https://lh3.googleusercontent.com/JWsutJ9nyTn8uCFqN2o8CNBi58WDqGUljTFpb1mWap6hIbiF6bCKF_zvnACwiCmVjwDvVyWsJiUv2qFzDxYX5LBlvbgIVajDDvDZMklC0CP0whgilQ=w1200-rj", + "foreground": "https://lh3.googleusercontent.com/5quicMbc7u7KV8PRmVEqEXEN6Gyg_iqHmxaqf6_mhWUpPdEFNls6CQh80PAPibXQ5H_z2haw90zA6ZfITtF4pDT6ausRdPx1FD4aA4gEY2JyV34EjauX=w2400" +} +``` + ```tsx import { MdMoreVert } from "react-icons/md"; -import {IconButton, Divider, VStack, TextField} from "@znui/react"; +import {IconButton, Divider, VStack, TextField, Menu} from "@znui/react"; diff --git a/packages/navigation-bar/src/NavigationBar.md b/packages/navigation-bar/src/NavigationBar.md index 4ef99138..4fa4d092 100644 --- a/packages/navigation-bar/src/NavigationBar.md +++ b/packages/navigation-bar/src/NavigationBar.md @@ -1,3 +1,13 @@ +``` +{ + "category": "navigation", + "type": "Navigation bar", + "description": "Navigation bars let people switch between UI views on smaller devices", + "background": "https://lh3.googleusercontent.com/289kyr53cPXdkUI3wS0O1qQg5YH6e5L9gRJXlnlpBuMwaMF8eDvDfctFAChVaEOTf9Ktfw3nwIDFpyQpInEmwvfoRsKBTzgX04JXeAclIMZeo9TJbqI-=w1200-rj", + "foreground": "https://lh3.googleusercontent.com/zw4SDpLpHGc2dFGb_FnrhEEQfKtXg_3UEnwHXke-iLlKA_M1MKLRlINLVEbwb5NlcOwyzjhgJoHyaVhXcilNgwt9EhBaSxi-w5EVf1mpRvEIgN-E-IQ=w2400" +} +``` + ```tsx import {NavigationBar, VStack, Badge, Button, SegmentedButton} from "@znui/react"; import { MdHome, MdMessage, MdNotifications, MdMenu } from "react-icons/md"; diff --git a/packages/navigation-rail/src/NavigationRail.md b/packages/navigation-rail/src/NavigationRail.md index 7b1aa508..3ddff95a 100644 --- a/packages/navigation-rail/src/NavigationRail.md +++ b/packages/navigation-rail/src/NavigationRail.md @@ -1,3 +1,13 @@ +``` +{ + "category": "navigation", + "type": "Navigation rail", + "description": "Navigation rails let people switch between UI views on mid-sized devices", + "background": "https://lh3.googleusercontent.com/cxzXBa301YGBTmRHZNUj6E3CI5iV-JU7FghrMvgiI-qmackVdnhZziGXA8SQtW0FXi41uwATvq96BJPB-YEBM-JgyA9VtqH04E59xGQtlgyy_6Gl8Q=w1200-rj", + "foreground": "https://lh3.googleusercontent.com/muYuyGZXVw-Iw9r8EDVBtfyru7D1Nloj-SbM1HncS6jMiUCzwOX6LClbmWVMJVHhs52PUVzT09NUVOoGa1sM7dRxitpUErmjwoBPilraLHtphuasVQ=w2400" +} +``` + ```tsx import {HStack, VStack, SegmentedButton, FloatingActionButton, Button, NavigationRail, Badge} from "@znui/react"; import { MdAdd, MdHome, MdMessage, MdNotifications, MdSettings } from "react-icons/md"; diff --git a/packages/radio/src/Radio.md b/packages/radio/src/Radio.md index cb68a3a8..44962db2 100644 --- a/packages/radio/src/Radio.md +++ b/packages/radio/src/Radio.md @@ -1,3 +1,13 @@ +``` +{ + "category": "selection", + "type": "Radio button", + "description": "Radio buttons let people select one option from a set of options", + "background": "https://lh3.googleusercontent.com/1U6OJk-iBylIbvwM9vlA4TlcPvSV5-W-eECa138NF5exK9_6hiTYGdX3hcu-udT4aHBgvH9KS00BbwyXi2Mzo6j1kb7fHD-jrY1XH7Ue_nIpvqwtew=w1200-rj", + "foreground": "https://lh3.googleusercontent.com/rxx6EbsEv1KljOUm3DVCjUZkL9kGRmaCTrJNTDfx_WNgNYLjYSBp5Sy7oJ_OwQAcJq7DSDDUgSDFou9H1uzaphCB66YsdyEQv872P16RfalbZPMxuL-J=w2400" +} +``` + ```tsx import React from "react"; import {VStack, Radio} from "@znui/react"; @@ -11,5 +21,6 @@ const handleChange = (event) => { + ``` \ No newline at end of file diff --git a/packages/radio/src/Radio.tsx b/packages/radio/src/Radio.tsx index 39eb4708..5fbac1dc 100644 --- a/packages/radio/src/Radio.tsx +++ b/packages/radio/src/Radio.tsx @@ -13,6 +13,7 @@ export const Radio = React.forwardRef( (props: RadioProps, inputRef: React.ForwardedRef) => { const { checked: isChecked, + disabled, ...otherProps } = props @@ -21,13 +22,15 @@ export const Radio = React.forwardRef( checked={isChecked} ref={inputRef} layoutSize={24} + disabled={disabled} {...otherProps} >
diff --git a/packages/slider/src/Slider.md b/packages/slider/src/Slider.md index c7bec6b4..bd540a7a 100644 --- a/packages/slider/src/Slider.md +++ b/packages/slider/src/Slider.md @@ -1,3 +1,13 @@ +``` +{ + "category": "selection", + "type": "Sliders", + "description": "Sliders let users make selections from a range of values", + "background": "https://lh3.googleusercontent.com/TEc0vMYRxeXdCbJm1-SeTuCPT_8nszQECwMZqpHE1GXf2hmTFPvxCHj8bYdcp5ZKJdOLduoCj_LRsowsH_sPlPeGa0kt3FypXTKSjQ5ehE-DZaoJvQ=w1200-rj", + "foreground": "https://lh3.googleusercontent.com/UmaSn_4IuIwCHt1xAM3sSQNcCZAnJhRsExdO50rrKl3uUa1mUaSC5N6PKACaXU0nak665i6Be0xTdmomzQ1pEXKtG8iyYOVgo-8U4e4N0ob1Bon_omg=w2400" +} +``` + ```tsx import {Slider, VStack} from "@znui/react"; import {useState} from "react"; @@ -10,5 +20,7 @@ const [value, setValue] = useState(0); setValue(e.currentTarget.valueAsNumber)}/> + + ``` \ No newline at end of file diff --git a/packages/slider/src/Slider.tsx b/packages/slider/src/Slider.tsx index 75eaea63..2093dbd3 100644 --- a/packages/slider/src/Slider.tsx +++ b/packages/slider/src/Slider.tsx @@ -64,6 +64,7 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded value, defaultValue = 0, step = 1, + disabled, ...layoutRest } = props @@ -80,6 +81,7 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded return + {/* Inactive Track */} + {/* Active Track */} @@ -155,20 +161,24 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded key={"step-"+i} layoutSize={4} shapeScale="full" - oc={(step <= 1 ? (i === 0 || i === stepCount ? 1: 0): 1)*(i * step === currentValue ? 0: 1)} - bg={i * step < currentValue ? ThemeTokens.onPrimary: ThemeTokens.onPrimaryContainer} + oc={(step <= 1 ? (i === 0 || i === stepCount ? 1 : 0) : 1) * (i * step === currentValue ? 0: 1) * (disabled ? i * step < currentValue ? 0.66 : 0.38 : 1)} + bg={i * step < currentValue ? + (disabled ? ThemeTokens.inverseOnSurface : ThemeTokens.onPrimary) + : (disabled ? ThemeTokens.onSurface : ThemeTokens.onPrimaryContainer)} /> ) } + {/* Handle */} .thumb': { bg: checked ? ThemeTokens.primaryContainer : ThemeTokens.onSecondaryContainer }, '&:focus-within > .thumb': { bg: checked ? ThemeTokens.primaryContainer : ThemeTokens.onSurfaceVariant - }, - '&:disabled > .truck': { - bg: ThemeTokens.onSurface, - borderColor: ThemeTokens.onSurface, - oc: 0.12 - }, - '&:disabled > .thumb': { - bg: checked ? ThemeTokens.surface: ThemeTokens.onSurface, - c: checked ? ThemeTokens.onSurface: undefined, - borderColor: ThemeTokens.onSurfaceVariant, - oc: 0.12 } }} clip={true} @@ -154,23 +143,25 @@ export const Switch = React.forwardRef(( onPointerMove={onClearDown} onPointerCancel={onClearDown} > + {/* Track */} + {/* Handle */}
{ flex={1} bg={`url("${foreground}") no-repeat`} bgSize='cover' - backgroundPosition="50% 100%" + backgroundPosition="50% 50%" /> } /> diff --git a/styleguide/src/pages/ComponentsPage/ComponentsOverviewPage.tsx b/styleguide/src/pages/ComponentsPage/ComponentsOverviewPage.tsx index 49abc791..b2db5a05 100644 --- a/styleguide/src/pages/ComponentsPage/ComponentsOverviewPage.tsx +++ b/styleguide/src/pages/ComponentsPage/ComponentsOverviewPage.tsx @@ -26,7 +26,7 @@ const categories = { title: "Navigation", description: "Navigation components help people move through the UI.", }, - Selection: { + selection: { title: "Selection", description: "Selection components let people specify choices.", }, @@ -43,6 +43,7 @@ export const ComponentsOverviewPage = () => { const sections = components.reduce(function (r, a) { r[a.category] = r[a.category] || []; r[a.category].push(a); + return r; }, Object.create(null)) @@ -60,6 +61,7 @@ export const ComponentsOverviewPage = () => { {Object.entries(categories).map(([key, {title, description}]) => { const components: ComponentData[] = sections[key] || [] + return {title} {description} @@ -98,7 +100,7 @@ export const ComponentsOverviewPage = () => { posA={0} bg={`url("${component.foreground}") no-repeat`} bgSize='cover' - backgroundPosition="50% 100%" + backgroundPosition="50% 50%" /> } diff --git a/styleguide/src/pages/hooks/HooksPage.tsx b/styleguide/src/pages/hooks/HooksPage.tsx index dd208a5e..c13ec564 100644 --- a/styleguide/src/pages/hooks/HooksPage.tsx +++ b/styleguide/src/pages/hooks/HooksPage.tsx @@ -154,7 +154,7 @@ export function HooksPage() { preview={} /> - s +
{Object.keys(Hooks).map(hookName => { const hookPageInfo = Hooks[hookName] From 773c3fa71279bcfea55fdd46e1598bf10615ae56 Mon Sep 17 00:00:00 2001 From: vitiacat Date: Tue, 31 Dec 2024 13:30:34 +0300 Subject: [PATCH 3/5] refactor(snackbar): Rename 'icon' prop to 'closeButton' and add visual representation --- packages/snackbar/src/useSnackbar.md | 34 ++++++++++++++++++++++++++- packages/snackbar/src/useSnackbar.tsx | 14 +++++++---- 2 files changed, 43 insertions(+), 5 deletions(-) diff --git a/packages/snackbar/src/useSnackbar.md b/packages/snackbar/src/useSnackbar.md index b5d7e2ed..6457a287 100644 --- a/packages/snackbar/src/useSnackbar.md +++ b/packages/snackbar/src/useSnackbar.md @@ -12,6 +12,7 @@ ```tsx import {useSnackbar, VStack, Button, SegmentedButton} from "@znui/react"; import {useState} from "react"; +import {MdClose} from "react-icons/md" const [horizontal, setHorizontal] = useState('right') @@ -50,12 +51,43 @@ const snackbar = useSnackbar(); snackbar({ text: 'Single-line snackbar with action', action: { - title: 'Action' + title: 'Action', + onClick: () => alert("Action") }, horizontal }) }}> Show Snackbar with action + + + + ``` \ No newline at end of file diff --git a/packages/snackbar/src/useSnackbar.tsx b/packages/snackbar/src/useSnackbar.tsx index faa5accc..223f2b93 100644 --- a/packages/snackbar/src/useSnackbar.tsx +++ b/packages/snackbar/src/useSnackbar.tsx @@ -3,12 +3,12 @@ import {ThemeTokens} from "@znui/md3-themes"; import {keyframes} from "@emotion/react"; import {usePortals, ZnUIPortal} from "@znui/portals"; import {Adaptive, useAdaptiveValue} from "@znui/base"; -import {Button, ButtonProps} from "@znui/buttons"; +import {Button, ButtonProps, IconButton} from "@znui/buttons"; import {HStack, Layout} from "@znui/layouts"; import {Body} from "@znui/typography"; export type SnackbarConfig = { - icon?: ReactNode + closeButton?: SnackbarCloseButton text: ReactNode | string action?: SnackbarAction horizontal?: 'left' | 'right' @@ -22,6 +22,11 @@ export type SnackbarAction = { onClick?: MouseEventHandler } +export type SnackbarCloseButton = { + icon: ReactNode + onClick?: MouseEventHandler +} + export type SnackbarInterface = { hide: () => void; } @@ -184,9 +189,10 @@ export const useSnackbar = (): SnackbarHook => { bottom={bottomOffset} zIndex={5000} > - + {config.text} - {config.action && {config.action.title}} + {config.action && {config.action.title}} + {config.closeButton && {config.closeButton.icon}} }) From 147ca9de2bf07f6e0396b8749c02b18b0df47cf8 Mon Sep 17 00:00:00 2001 From: vitiacat Date: Tue, 31 Dec 2024 18:39:38 +0300 Subject: [PATCH 4/5] fix(Radio): fix typo refactor(Tappable): ability to disable tappable docs: added bun package installation example feat(Chip): add Chip component chore: update version of @znui/checkbox, @znui/radio, @znui/slider, @znui/switch to 1.3.1-alpha.0 and @znui/modals to 1.3.0-alpha.2 --- packages/checkbox/package.json | 2 +- packages/chip/README.md | 15 ++ packages/chip/package.json | 64 +++++++ packages/chip/rollup.config.js | 32 ++++ packages/chip/src/Chip.md | 160 ++++++++++++++++++ packages/chip/src/Chip.tsx | 125 ++++++++++++++ packages/chip/tsconfig.json | 33 ++++ packages/md3/package.json | 3 +- packages/md3/src/index.ts | 1 + packages/modals/package.json | 2 +- packages/radio/package.json | 2 +- packages/radio/src/Radio.tsx | 2 +- packages/ripple/src/Tappable/Tappable.tsx | 12 +- packages/slider/package.json | 2 +- packages/switch/package.json | 2 +- .../src/pages/GetStartedPage/get-started.mdx | 6 +- yarn.lock | 13 ++ 17 files changed, 466 insertions(+), 10 deletions(-) create mode 100644 packages/chip/README.md create mode 100644 packages/chip/package.json create mode 100644 packages/chip/rollup.config.js create mode 100644 packages/chip/src/Chip.md create mode 100644 packages/chip/src/Chip.tsx create mode 100644 packages/chip/tsconfig.json diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 722cbb44..e1e3dd8f 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@znui/checkbox", - "version": "1.3.0-alpha.0", + "version": "1.3.1-alpha.0", "main": "./dist/Checkbox.js", "module": "./dist/Checkbox.es.js", "types": "./dist/Checkbox.d.ts", diff --git a/packages/chip/README.md b/packages/chip/README.md new file mode 100644 index 00000000..0728f7b1 --- /dev/null +++ b/packages/chip/README.md @@ -0,0 +1,15 @@ +# ZnUI Radio component +[![npm version](https://buttons.fury.io/js/@znui%2Fchip.svg)](https://buttons.fury.io/js/@znui%2Fchip) + +## Documentation +[API Documentation and examples](https://ui.zation.ru/) + +## Installation + +``` +npm install @znui/chip +``` + +## Components + +- Chip \ No newline at end of file diff --git a/packages/chip/package.json b/packages/chip/package.json new file mode 100644 index 00000000..5b97f26a --- /dev/null +++ b/packages/chip/package.json @@ -0,0 +1,64 @@ +{ + "name": "@znui/chip", + "version": "1.3.1-alpha.0", + "main": "./dist/Chip.js", + "module": "./dist/Chip.es.js", + "types": "./dist/Chip.d.ts", + "files": [ + "dist", + "README.md" + ], + "license": "MIT", + "dependencies": { + "@znui/layouts": "^1.3.0-alpha", + "@znui/md3-themes": "^1.3.0-alpha", + "@znui/md3-utils": "^1.3.0-alpha" + }, + "scripts": { + "build": "rollup -c" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "publishConfig": { + "access": "public" + }, + "keywords": [ + "react", + "react-component", + "znui", + "unstyled", + "material", + "material design", + "design system", + "components" + ], + "author": "vitiacat", + "bugs": { + "url": "https://github.com/ZationRU/ReactUI/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ZationRU/ReactUI.git", + "directory": "packages/chip" + } +} diff --git a/packages/chip/rollup.config.js b/packages/chip/rollup.config.js new file mode 100644 index 00000000..1fa6665d --- /dev/null +++ b/packages/chip/rollup.config.js @@ -0,0 +1,32 @@ +const typescript = require('@rollup/plugin-typescript'); +const commonjs = require('@rollup/plugin-commonjs'); +const external = require('rollup-plugin-peer-deps-external'); +const autoExternal = require('rollup-plugin-auto-external'); + +const config = [ + { + input: 'src/Chip.tsx', + output: [ + { + file: 'dist/Chip.js', + format: 'cjs', + exports: 'named', + sourcemap: true + }, + { + file: 'dist/Chip.es.js', + format: 'es', + exports: 'named', + sourcemap: true + } + ], + plugins: [ + autoExternal(), + external(), + typescript(), + commonjs(), + ] + } +]; + +module.exports = config; \ No newline at end of file diff --git a/packages/chip/src/Chip.md b/packages/chip/src/Chip.md new file mode 100644 index 00000000..69702c99 --- /dev/null +++ b/packages/chip/src/Chip.md @@ -0,0 +1,160 @@ +``` +{ + "category": "selection", + "type": "Chip", + "description": "Chips help people enter information, make selections, filter content, or trigger actions", + "background": "https://lh3.googleusercontent.com/5yNSjuDq1EJcGjo4i0bGiptDWp3x7YqKPdnY6j8bl37hC1QR8uFsOdC-NEXa50cIT3IilNzTQlQWsAhubjxh100Fj9iSUkPdrcWLTNRrUO41aoMwblg=w1200-rj", + "foreground": "https://lh3.googleusercontent.com/0CRy116jMP4AbIrg_e25MgPjmNiPNfDAYH8DXPLOIzraSLBuY9pvglx5agCvGQuKW6asCPuwo5FLvQAjFUAkn0De9EX4p0mmMA2DN8u4c2n1BFfXRm3n=w2400" +} +``` + +```tsx +import React, {useState} from "react"; +import {VStack, HStack, Chip, Body} from "@znui/react"; +import {MdCamera, MdClose, MdNightlight} from 'react-icons/md'; +import {Avatar} from "@znui/media"; + +const [selectedChips, setSelectedChips] = useState([]); + +const selectChip = (id) => { + setSelectedChips(prev => prev.includes(id) ? prev.filter(it => it != id) : [...prev, id]) +} + + + + {Array.from({length: 20}).fill( + Label + )} + + + Outline + + + + Label + + + }> + Label + + + } trailingOnClick={() => alert("Click")}> + Label + + + } trailingOnClick={() => alert("Click")} leading={}> + Label + + + }> + levkopo + + + } trailingIcon={}> + levkopo + + + } disabled={true} leading={}> + Label + + + + Tonal + + + + Label + + + }> + Label + + + } trailingOnClick={() => alert("Click")}> + Label + + + } trailingOnClick={() => alert("Click")} leading={}> + Label + + + }> + levkopo + + + } trailingIcon={}> + levkopo + + + } disabled={true} leading={}> + Label + + + + Filled + + + + Label + + + }> + Label + + + } trailingOnClick={() => alert("Click")}> + Label + + + } trailingOnClick={() => alert("Click")} leading={}> + Label + + + }> + levkopo + + + } trailingIcon={}> + levkopo + + + } disabled={true} leading={}> + Label + + + + Clickable + + + Post on + } onClick={() => alert("Want change?")}> + my page + + + + Selectable + + + selectChip(0)}> + Music + + selectChip(1)}> + Video + + selectChip(2)}> + Clips + + selectChip(3)}> + Photos + + + + Posts + + + + Newslatter + + + +``` \ No newline at end of file diff --git a/packages/chip/src/Chip.tsx b/packages/chip/src/Chip.tsx new file mode 100644 index 00000000..443809c4 --- /dev/null +++ b/packages/chip/src/Chip.tsx @@ -0,0 +1,125 @@ +import React, {ForwardedRef, ReactElement, ReactNode, useMemo} from "react"; +import {ThemeTokens} from "@znui/md3-themes"; +import {HStack, Layout, LayoutProps} from "@znui/layouts"; +import {Label} from "@znui/typography"; +import {IconWrapper} from "@znui/md3-utils"; +import {StateLayer, Tappable} from "@znui/ripple"; +import {znui, ZnUIStyleObject} from "@znui/base"; + +export interface ChipProps extends LayoutProps { + mode?: 'outlined' | 'elevated' | 'filled' + leading?: ReactElement + avatar?: ReactElement + trailingIcon?: ReactElement + trailingOnClick?: React.MouseEventHandler + children: ReactNode + /** + * @default false + */ + assist?: boolean + /** + * @default outline + */ + variant?: 'outline' | 'tonal' | 'filled' + /** + * Whether the chip is selected (filled and has a leading check icon). + * @default false + */ + selected?: boolean + disabled?: boolean +} + +const variantStyles: Record = { + 'outline': {}, + 'filled': { + bg: ThemeTokens.secondaryContainer, + borderColor: undefined, + border: undefined + }, + 'tonal': { + bg: ThemeTokens.onSurfaceVariant + } +} + +/** + * Checkbox buttons let people select one option from a set of options + */ +export const Chip = React.forwardRef( + (props: ChipProps, ref: ForwardedRef) => { + const { + onClick, + children, + leading, + trailingIcon, + trailingOnClick, + avatar, + assist = false, + selected, + disabled = false, + variant = 'outline', + ...otherProps + } = props + + const finalVariant = useMemo(() => selected ? 'filled' : variant, [selected]) + const finalLeading = useMemo(() => selected ? + + : leading, [selected, disabled]) + + return .state-layer': { + oc: 0.12, + bg: 'currentColor' + }, + '&:hover > .state-layer': { + oc: 0.08, + bg: 'currentColor' + }, + }} + {...variantStyles[finalVariant]} + bg='transparent' + {...otherProps} + > + + {onClick && } + {finalLeading && !avatar && + {finalLeading} + } + + {avatar} + + + + {trailingIcon && + + + {trailingIcon} + + } + + } +) + +Chip.displayName = 'Chip' \ No newline at end of file diff --git a/packages/chip/tsconfig.json b/packages/chip/tsconfig.json new file mode 100644 index 00000000..d137644a --- /dev/null +++ b/packages/chip/tsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "plugins": [{ "name": "typescript-plugin-css-modules" }], + "outDir": "dist", + "target": "esnext", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "declaration": true, + "moduleResolution": "node", + "esModuleInterop": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": false, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": false, + "jsx": "react" + }, + "include": ["src"], + "exclude": ["node_modules", "dist"] +} diff --git a/packages/md3/package.json b/packages/md3/package.json index 490da35b..172804df 100644 --- a/packages/md3/package.json +++ b/packages/md3/package.json @@ -46,7 +46,8 @@ "@znui/text-fields": "^1.3.0-alpha", "@znui/tooltip": "^1.3.0-alpha", "@znui/typography": "^1.3.0-alpha", - "@znui/utils": "^1.3.0-alpha" + "@znui/utils": "^1.3.0-alpha", + "@znui/chip": "^1.3.0-alpha" }, "peerDependencies": { "react": "^18.2.0", diff --git a/packages/md3/src/index.ts b/packages/md3/src/index.ts index 52ebacb5..b61be3a4 100644 --- a/packages/md3/src/index.ts +++ b/packages/md3/src/index.ts @@ -33,3 +33,4 @@ export * from "@znui/navigation-menu" export * from "@znui/navigation-rail" export * from "@znui/snackbar" export * from "@znui/side-sheets" +export * from "@znui/chip" \ No newline at end of file diff --git a/packages/modals/package.json b/packages/modals/package.json index b39e0cd5..5a544798 100644 --- a/packages/modals/package.json +++ b/packages/modals/package.json @@ -1,6 +1,6 @@ { "name": "@znui/modals", - "version": "1.3.0-alpha.1", + "version": "1.3.0-alpha.2", "main": "./dist/index.js", "module": "./dist/index.es.js", "types": "./dist/index.d.ts", diff --git a/packages/radio/package.json b/packages/radio/package.json index 1e7226ec..ac686a29 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -1,6 +1,6 @@ { "name": "@znui/radio", - "version": "1.3.0-alpha.0", + "version": "1.3.1-alpha.0", "main": "./dist/Radio.js", "module": "./dist/Radio.es.js", "types": "./dist/Radio.d.ts", diff --git a/packages/radio/src/Radio.tsx b/packages/radio/src/Radio.tsx index 5fbac1dc..e8c5e399 100644 --- a/packages/radio/src/Radio.tsx +++ b/packages/radio/src/Radio.tsx @@ -7,7 +7,7 @@ import {znui} from "@znui/base"; export interface RadioProps extends FormWidgetBaseProps {} /** - * Checkbox buttons let people select one option from a set of options + * Radio buttons let people select one option from a set of options */ export const Radio = React.forwardRef( (props: RadioProps, inputRef: React.ForwardedRef) => { diff --git a/packages/ripple/src/Tappable/Tappable.tsx b/packages/ripple/src/Tappable/Tappable.tsx index ccb44547..74c2cd44 100644 --- a/packages/ripple/src/Tappable/Tappable.tsx +++ b/packages/ripple/src/Tappable/Tappable.tsx @@ -10,6 +10,13 @@ export interface TappableProps extends LayoutProps { */ ripple?: boolean + /** + * Need to disable clicking + * + * @default false + */ + disabled?: boolean + stateLayerProps?: StateLayerProps } @@ -18,18 +25,19 @@ export const Tappable = React.forwardRef( const { children, ripple = true, + disabled = false, stateLayerProps, ...otherProps } = props return - + {!disabled && } {children} } diff --git a/packages/slider/package.json b/packages/slider/package.json index 8ea7824e..4b4376a2 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -1,6 +1,6 @@ { "name": "@znui/slider", - "version": "1.3.0-alpha.0", + "version": "1.3.1-alpha.0", "main": "./dist/Slider.js", "module": "./dist/Slider.es.js", "types": "./dist/Slider.d.ts", diff --git a/packages/switch/package.json b/packages/switch/package.json index 95dcd403..7d5b7f1f 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -1,6 +1,6 @@ { "name": "@znui/switch", - "version": "1.3.0-alpha.0", + "version": "1.3.1-alpha.0", "main": "./dist/Switch.js", "module": "./dist/Switch.es.js", "types": "./dist/Switch.d.ts", diff --git a/styleguide/src/pages/GetStartedPage/get-started.mdx b/styleguide/src/pages/GetStartedPage/get-started.mdx index cf0f666c..2ec4256a 100644 --- a/styleguide/src/pages/GetStartedPage/get-started.mdx +++ b/styleguide/src/pages/GetStartedPage/get-started.mdx @@ -15,7 +15,7 @@ export const PackageInstall = () => { return npm @@ -26,12 +26,16 @@ export const PackageInstall = () => { pnpm + + bun + {selectedPackageManager==='npm'&&"npm install @znui/react"} {selectedPackageManager==='yarn'&&"yarn add @znui/react"} {selectedPackageManager==='pnpm'&&"pnpm add @znui/react"} + {selectedPackageManager==='bun'&&"bun add @znui/react"} } diff --git a/yarn.lock b/yarn.lock index 2e5eafe6..8f5ae2e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3097,6 +3097,19 @@ __metadata: languageName: unknown linkType: soft +"@znui/chip@workspace:packages/chip": + version: 0.0.0-use.local + resolution: "@znui/chip@workspace:packages/chip" + dependencies: + "@znui/layouts": "npm:^1.3.0-alpha" + "@znui/md3-themes": "npm:^1.3.0-alpha" + "@znui/md3-utils": "npm:^1.3.0-alpha" + peerDependencies: + react: ^18.2.0 + react-dom: ^18.2.0 + languageName: unknown + linkType: soft + "@znui/coordinator-layout@npm:^1.3.0-alpha, @znui/coordinator-layout@workspace:packages/coordinator-layout": version: 0.0.0-use.local resolution: "@znui/coordinator-layout@workspace:packages/coordinator-layout" From 3d600e46f5800e106d32ac242e121a2aa6e9c86c Mon Sep 17 00:00:00 2001 From: vitiacat Date: Tue, 31 Dec 2024 21:49:39 +0300 Subject: [PATCH 5/5] chore: update versions to 1.3.0-alpha.1 --- packages/checkbox/package.json | 2 +- packages/chip/package.json | 2 +- packages/radio/package.json | 2 +- packages/slider/package.json | 2 +- packages/switch/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index e1e3dd8f..7c3b628f 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@znui/checkbox", - "version": "1.3.1-alpha.0", + "version": "1.3.0-alpha.1", "main": "./dist/Checkbox.js", "module": "./dist/Checkbox.es.js", "types": "./dist/Checkbox.d.ts", diff --git a/packages/chip/package.json b/packages/chip/package.json index 5b97f26a..34789d28 100644 --- a/packages/chip/package.json +++ b/packages/chip/package.json @@ -1,6 +1,6 @@ { "name": "@znui/chip", - "version": "1.3.1-alpha.0", + "version": "1.3.0-alpha.1", "main": "./dist/Chip.js", "module": "./dist/Chip.es.js", "types": "./dist/Chip.d.ts", diff --git a/packages/radio/package.json b/packages/radio/package.json index ac686a29..68eacefc 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -1,6 +1,6 @@ { "name": "@znui/radio", - "version": "1.3.1-alpha.0", + "version": "1.3.0-alpha.1", "main": "./dist/Radio.js", "module": "./dist/Radio.es.js", "types": "./dist/Radio.d.ts", diff --git a/packages/slider/package.json b/packages/slider/package.json index 4b4376a2..ab77e3cc 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -1,6 +1,6 @@ { "name": "@znui/slider", - "version": "1.3.1-alpha.0", + "version": "1.3.0-alpha.1", "main": "./dist/Slider.js", "module": "./dist/Slider.es.js", "types": "./dist/Slider.d.ts", diff --git a/packages/switch/package.json b/packages/switch/package.json index 7d5b7f1f..221b4bc9 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -1,6 +1,6 @@ { "name": "@znui/switch", - "version": "1.3.1-alpha.0", + "version": "1.3.0-alpha.1", "main": "./dist/Switch.js", "module": "./dist/Switch.es.js", "types": "./dist/Switch.d.ts",