@lynx-example/lynx-ui-common 0.0.18 → 0.0.20

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lynx-example/lynx-ui-common
 
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/lynx-ui@3.140.0
+
+## 0.0.19
+
+### Patch Changes
+
+- Rename the PreCommitHook entry to CommonPreCommitHook and refine the example ([#336](https://github.com/lynx-family/lynx-ui/pull/336))
+  with explicit state colors, a legend, and a neutral remount control.
+- Updated dependencies [[`4588802`](https://github.com/lynx-family/lynx-ui/commit/4588802388d8f2b04b2819b50cd165432e8bcdd5), [`1a4ad19`](https://github.com/lynx-family/lynx-ui/commit/1a4ad190993d57425b4c377a7dd63882cc65a8d2), [`18d4559`](https://github.com/lynx-family/lynx-ui/commit/18d4559bde1fff0f316d45f43c1eb47b935f9557), [`e926e76`](https://github.com/lynx-family/lynx-ui/commit/e926e76b8941a8bd4b8948c2b65412304d29eb98), [`dde9dd8`](https://github.com/lynx-family/lynx-ui/commit/dde9dd84d41c19ff3a5d126a0479cf1d117da644)]:
+  - @lynx-js/lynx-ui@3.139.0
+
 ## 0.0.18
 
 ### Patch Changes

package/PreCommitHook/index.tsx

@@ -5,12 +5,14 @@
 import { root, useMainThreadRef, useState } from '@lynx-js/react'
 import './styles.css'
 
-import { usePreCommit } from '@lynx-js/lynx-ui'
+import { Button, usePreCommit } from '@lynx-js/lynx-ui'
 import type { MainThread } from '@lynx-js/types'
 
-function App() {
+function PreCommitBox() {
   const nodeMTRef = useMainThreadRef<MainThread.Element>(null)
+  const textMTRef = useMainThreadRef<MainThread.Element>(null)
   const [boxStyle, setBoxStyle] = useState('')
+  const [textStyle, setTextStyle] = useState('')
 
   /**
    * When update happens, state will be patched to main thread
@@ -20,22 +22,57 @@ function App() {
   usePreCommit(() => {
     'main thread'
     nodeMTRef.current?.setStyleProperties({
-      'background-color': '#ff5a7a',
+      'background-color': '#00D0F1',
+    })
+    textMTRef.current?.setStyleProperties({
+      color: '#ffffff',
     })
   }, [])
 
   return (
-    <view className='demo-container lunaris-dark'>
-      <view
-        bindtap={() => {
-          setBoxStyle('background-color: var(--primary);')
-        }}
-        main-thread:ref={nodeMTRef}
-        style={boxStyle}
-        className='box'
+    <view
+      bindtap={() => {
+        setBoxStyle('background-color: var(--primary);')
+        setTextStyle('color: var(--primary-content);')
+      }}
+      main-thread:ref={nodeMTRef}
+      style={boxStyle}
+      className='box'
+    >
+      <text
+        main-thread:ref={textMTRef}
+        style={textStyle}
+        className='box-text'
       >
-        <text className='box-text'>PreCommit</text>
+        PreCommit
+      </text>
+    </view>
+  )
+}
+
+function App() {
+  const [revision, setRevision] = useState(0)
+
+  return (
+    <view className='demo-container lunaris-dark'>
+      <PreCommitBox key={revision} />
+      <text className='tap-hint'>Tap to restore original style</text>
+      <view className='legend'>
+        <view className='legend-item'>
+          <view className='legend-swatch legend-swatch-original' />
+          <text className='legend-label'>Original</text>
+        </view>
+        <view className='legend-item'>
+          <view className='legend-swatch legend-swatch-pre-commit' />
+          <text className='legend-label'>Pre-commit</text>
+        </view>
       </view>
+      <Button
+        className='redo-button'
+        onClick={() => setRevision((value) => value + 1)}
+      >
+        <text className='redo-button-label'>Redo mount</text>
+      </Button>
     </view>
   )
 }

package/PreCommitHook/styles.css

@@ -2,8 +2,10 @@
 
 .demo-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 12px;
   width: 100%;
   height: 100%;
   background-color: var(--canvas);
@@ -22,3 +24,64 @@
   color: var(--primary-content);
   font-size: 24px;
 }
+
+.tap-hint {
+  color: var(--content-muted);
+  font-size: 14px;
+}
+
+.legend {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+}
+
+.legend-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.legend-swatch-original {
+  background-color: var(--primary);
+}
+
+.legend-swatch-pre-commit {
+  background-color: #00d0f1;
+}
+
+.legend-label {
+  color: var(--content);
+  font-size: 13px;
+}
+
+.redo-button {
+  width: 80%;
+  max-width: 240px;
+  height: 44px;
+  margin-top: 8px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background-color: var(--neutral-ambient);
+}
+
+.redo-button.ui-active {
+  background-color: var(--neutral-faint);
+}
+
+.redo-button-label {
+  color: var(--content);
+  font-size: 14px;
+  font-weight: 600;
+}

package/lynx.config.mjs

@@ -1,7 +1,7 @@
 import { exampleConfig } from '../../../tools/configs/exampleConfig.mjs'
 
 const defaultConfig = exampleConfig({
-  PreCommitHook: './PreCommitHook/index.tsx',
+  CommonPreCommitHook: './PreCommitHook/index.tsx',
 })
 
 export default defaultConfig

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-example/lynx-ui-common",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Example app demonstrating common utilities in lynx-ui",
   "homepage": "https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Common#readme",
   "repository": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@lynx-js/react": "0.123.1",
     "@lynx-js/luna-styles": "0.2.2",
-    "@lynx-js/lynx-ui": "3.138.0"
+    "@lynx-js/lynx-ui": "3.140.0"
   },
   "devDependencies": {
     "@lynx-js/qrcode-rsbuild-plugin": "0.6.0",