react-resval v1.0.0-beta

.github/workflows/lint-test.yml

@@ -17,4 +17,4 @@ jobs:
       - run: npx nx affected --target=lint --fix --parallel --base=main --head=HEAD
       - run: npx nx format:write --uncommitted
       - run: npx nx test react-resval
-      - run: npx nx e2e docs-react-e2e --prod
+      # - run: npx nx e2e docs-react-e2e --prod

docs/docs-react/src/app/resval.tsx

@@ -4,7 +4,7 @@ import { useVx } from '../hooks/use-vx'
 
 export default function Resval() {
   const [count, setCount] = React.useState(0)
-  const { color1 } = useVx()
+  const { color1, value } = useVx()
 
   return (
     <div>
@@ -17,6 +17,7 @@ export default function Resval() {
       >
         Count: {count}
       </h1>
+      <h1>{value}</h1>
     </div>
   )
 }

docs/docs-react/src/hooks/use-vx.ts

@@ -1,7 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable prefer-const */
 
-import { createResponsiveValues } from '@resval/react-responsive-values'
+// dev
+// import { createResponsiveValues } from '@resval/react-responsive-values'
+// prod
+import { createResponsiveValues } from '../../../../dist/packages/react-resval'
 
 const vx = createResponsiveValues({
   breakpoints: {
@@ -17,7 +20,7 @@ const vx = createResponsiveValues({
 
 let utilityValues: any = {}
 
-for (let i = 0; i < 1000_000; i++) {
+for (let i = 0; i < 100_000; i++) {
   utilityValues[`color${i}`] = {
     base: 'red',
     xs: 'green',
@@ -28,6 +31,15 @@ for (let i = 0; i < 1000_000; i++) {
   }
 }
 
+utilityValues['value'] = {
+  base: 'base',
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+}
+
 export function useVx() {
   return vx(utilityValues)
 }

package.json

@@ -76,7 +76,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "nx affected --target=lint --fix --parallel --base=feat/add-cache-for-optimizing-rendering --head=HEAD",
+      "nx affected --target=lint --fix --parallel --base=main --head=HEAD",
       "nx format:write --uncommitted"
     ]
   }