Merge pull request #53 from vitiacat/main

Chip, disabled state and more
ZationRU · Dec 31, 2024 · 5fcbf07 · 5fcbf07
2 parents 2b95626 + 3d600e4
commit 5fcbf07
Show file tree

Hide file tree

Showing 34 changed files with 648 additions and 64 deletions.
diff --git 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
 }
diff --git 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.0-alpha.1",
   "main": "./dist/Checkbox.js",
   "module": "./dist/Checkbox.es.js",
   "types": "./dist/Checkbox.d.ts",

diff --git 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,22 +21,30 @@ const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
     <Checkbox
         checked={allChecked}
         indeterminate={isIndeterminate}
-        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
+        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked, e.target.checked])}
     >
         Parent
     </Checkbox>
     <VStack ml={16} gap={12}>
         <Checkbox
             checked={checkedItems[0]}
-            onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
+            onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1], checkedItems[2]])}
         >
             Child
         </Checkbox>
 
         <Checkbox
             checked={checkedItems[1]}
             error={true}
-            onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
+            onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked, checkedItems[2]])}
+        >
+            Child
+        </Checkbox>
+
+        <Checkbox
+            checked={checkedItems[2]}
+            disabled={true}
+            onChange={(e) => setCheckedItems([checkedItems[0], checkedItems[1], e.target.checked])}
         >
             Child
         </Checkbox>

diff --git 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<HTMLInputElement>) => {
         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 <FormWidgetBase
             type='checkbox'
             checked={checked}
+            disabled={disabled}
             ref={inputRef}
             {...otherProps}
         >
@@ -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'
                     }}
                 >
                     <znui.svg
@@ -66,7 +68,7 @@ export const Checkbox = React.forwardRef(
                     >
                         <path id='state'
                               d={checked ? checkedPath: (indeterminate ? indeterminatePath: '')}
-                              fill={ThemeTokens.onPrimary}/>
+                              fill={disabled ? ThemeTokens.surface : ThemeTokens.onPrimary}/>
                     </znui.svg>
                 </Layout>
 

diff --git a/packages/chip/README.md 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
diff --git a/packages/chip/package.json b/packages/chip/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@znui/chip",
+  "version": "1.3.0-alpha.1",
+  "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
@@ -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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,7 +64,5 @@ export function resolveAdaptiveProps( @@
             }
         }
-        console.log(object, result)
         return result
     }