@xyo-network/react-access-gate 4.0.2 → 4.0.3

package/dist/browser/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useAccessCodes.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist/browser/hooks/useAccessCodes.d.ts

@@ -0,0 +1,7 @@
+export declare const useAccessCodes: (localStorageKey: string) => {
+    validated: boolean;
+    userAccessCodes: any[] | undefined;
+    onAccessCodeSuccess: () => void;
+    onCodeInputChange: (code?: string) => boolean;
+};
+//# sourceMappingURL=useAccessCodes.d.ts.map

package/dist/browser/hooks/useAccessCodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccessCodes.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAccessCodes.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,oBAAqB,MAAM;;;;+BAclB,MAAM;CAezC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-access-gate",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -43,20 +43,20 @@
     "lint-pkg": "npmPkgJsonLint ."
   },
   "dependencies": {
-    "@mui/icons-material": "^6.1.1",
+    "@mui/icons-material": "^6.1.2",
     "@xylabs/react-button": "^5.0.1",
     "@xylabs/react-flexbox": "^5.0.1",
     "@xylabs/react-shared": "^5.0.1"
   },
   "devDependencies": {
-    "@mui/material": "^6.1.1",
-    "@mui/styles": "^6.1.1",
-    "@storybook/react": "^8.3.3",
+    "@mui/material": "^6.1.2",
+    "@mui/styles": "^6.1.2",
+    "@storybook/react": "^8.3.5",
     "@xylabs/ts-scripts-yarn3": "^4.0.7",
     "@xylabs/tsconfig-react": "^4.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.3.3",
+    "storybook": "^8.3.5",
     "typescript": "^5.6.2"
   },
   "peerDependencies": {

package/src/components/AccessCodeGateFlexbox.stories.tsx

@@ -1,10 +1,13 @@
 import { Alert, Typography } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
 import { FlexCol } from '@xylabs/react-flexbox'
-import React, { useState } from 'react'
+import React from 'react'
 
+import { useAccessCodes } from '../hooks/index.ts'
 import { AccessCodeGateFlexbox } from './AccessCodeGateFlexbox.tsx'
 
+const ValidAccessCodes = ['100519']
+
 export default {
   component: AccessCodeGateFlexbox,
   title: 'access/AccessCodeGateFlexbox',
@@ -15,12 +18,9 @@ const Template: StoryFn<typeof AccessCodeGateFlexbox> = args => (
 )
 
 const TemplateWithAccessCodes: StoryFn<typeof AccessCodeGateFlexbox> = (args) => {
-  const validAccessCodes = ['100519']
-  const [validated, setValidated] = useState(false)
-  const onAccessCodeSuccess = () => {
-    setValidated(true)
-  }
-  const validateFunction = (code?: string) => code?.length === 6
+  const {
+    validated, onAccessCodeSuccess, onCodeInputChange,
+  } = useAccessCodes('storybook-access-codes-test')
 
   return validated
     ? <Alert severity="success">Success!</Alert>
@@ -28,11 +28,14 @@ const TemplateWithAccessCodes: StoryFn<typeof AccessCodeGateFlexbox> = (args) =>
         <FlexCol gap={2}>
           <AccessCodeGateFlexbox
             onAccessCodeSuccess={onAccessCodeSuccess}
-            validAccessCodes={validAccessCodes}
-            validateFunction={validateFunction}
+            validAccessCodes={ValidAccessCodes}
+            validateFunction={onCodeInputChange}
             {...args}
           />
-          <Typography variant="caption">Hint: 100519</Typography>
+          <Typography variant="caption">
+            Hint:
+            {ValidAccessCodes[0]}
+          </Typography>
         </FlexCol>
       )
 }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useAccessCodes.ts'

package/src/hooks/useAccessCodes.ts

@@ -0,0 +1,32 @@
+import { useMemo, useState } from 'react'
+
+export const useAccessCodes = (localStorageKey: string) => {
+  const [validated, setValidated] = useState(false)
+  const [codeInput, setCodeInput] = useState('')
+
+  const onAccessCodeSuccess = () => {
+    // Save the access code to local storage
+    if (codeInput) {
+      localStorage.setItem(localStorageKey, JSON.stringify([codeInput]))
+      setValidated(true)
+    } else {
+      // If the codeInput is empty, but we have success, do nothing since the successful code is already saved
+      setValidated(true)
+    }
+  }
+  const onCodeInputChange = (code?: string) => {
+    setCodeInput(code ?? '')
+    return code?.length === 6
+  }
+  const userAccessCodes = useMemo(() => {
+    const storedCodes = localStorage.getItem(localStorageKey)
+    if (storedCodes) {
+      const parsedResult = JSON.parse(storedCodes ?? '')
+      if (Array.isArray(parsedResult)) return parsedResult
+    }
+  }, [])
+
+  return {
+    validated, userAccessCodes, onAccessCodeSuccess, onCodeInputChange,
+  }
+}