From 5a43a894e19b22fd5c142675b8bf44c9e7c92bf3 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Thu, 21 Nov 2024 22:44:30 +0600 Subject: [PATCH 1/3] created a helper function for localstorage --- src/utilities/functions.js | 42 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/utilities/functions.js b/src/utilities/functions.js index 9aaf2f52..8aa0b9f7 100644 --- a/src/utilities/functions.js +++ b/src/utilities/functions.js @@ -86,3 +86,45 @@ export const formatFileSize = ( size ) => { } return `${ ( size / ( 1024 * 1024 * 1024 ) ).toFixed( 2 ) } GB`; // Format size to GB }; + +/** + * Safe local storage set, get and remove functions. + * + */ +export const safeLocalStorage = { + set: ( key, value ) => { + if ( typeof window === 'undefined' ) { + return; + } + try { + localStorage.setItem( key, JSON.stringify( value ) ); + } catch ( error ) { + // eslint-disable-next-line no-console + console.error( error ); + } + }, + get: ( key ) => { + if ( typeof window === 'undefined' ) { + return null; + } + try { + const value = localStorage.getItem( key ); + return value ? JSON.parse( value ) : null; + } catch ( error ) { + // eslint-disable-next-line no-console + console.error( error ); + return null; + } + }, + remove: ( key ) => { + if ( typeof window === 'undefined' ) { + return; + } + try { + localStorage.removeItem( key ); + } catch ( error ) { + // eslint-disable-next-line no-console + console.error( error ); + } + }, +}; From 66997c0f224cc32b38f545059003d5ae385b3be8 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Thu, 21 Nov 2024 22:45:12 +0600 Subject: [PATCH 2/3] replaced localStorage with the safeLocalStorage --- src/components/sidebar/sidebar.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 5c3cf957..e68c4063 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -6,7 +6,7 @@ import React, { useRef, useEffect, } from 'react'; -import { cn } from '@/utilities/functions'; +import { cn, safeLocalStorage } from '@/utilities/functions'; import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'; import Tooltip from '../tooltip'; @@ -61,10 +61,10 @@ export const Sidebar = ( { }: SidebarProps ) => { const sideBarRef = useRef( null ); const [ isCollapsed, setIsCollapsed ] = useState( () => { - const storedState = localStorage.getItem( 'sidebar-collapsed' ); + const storedState = safeLocalStorage.get( 'sidebar-collapsed' ); const isSmallScreen = window.innerWidth < 1280; if ( storedState ) { - return JSON.parse( storedState ); + return storedState; } return isSmallScreen; } ); @@ -80,13 +80,13 @@ export const Sidebar = ( { const isSmallScreen = window.innerWidth < 1280; if ( ! collapsible ) { setIsCollapsed( false ); - localStorage.removeItem( 'sidebar-collapsed' ); + safeLocalStorage.remove( 'sidebar-collapsed' ); } else if ( isSmallScreen ) { setIsCollapsed( true ); - localStorage.setItem( 'sidebar-collapsed', JSON.stringify( true ) ); + safeLocalStorage.set( 'sidebar-collapsed', true ); } else { - const storedState = localStorage.getItem( 'sidebar-collapsed' ); - setIsCollapsed( storedState ? JSON.parse( storedState ) : false ); + const storedState = safeLocalStorage.get( 'sidebar-collapsed' ); + setIsCollapsed( storedState ? storedState : false ); } if ( sideBarRef.current ) { @@ -155,10 +155,7 @@ export const SidebarFooter = ( { children }: SidebarCommonProps ) => { onClick={ () => { setIsCollapsed( ! isCollapsed ); - localStorage.setItem( - 'sidebar-collapsed', - JSON.stringify( ! isCollapsed ) - ); + safeLocalStorage.set( 'sidebar-collapsed', ! isCollapsed ); } } aria-label={ isCollapsed ? 'Expand sidebar' : 'Collapse sidebar' From a0fda9cec6adb1c53b0226acae6ace26cbfb6ac0 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Thu, 21 Nov 2024 22:45:29 +0600 Subject: [PATCH 3/3] chore: Lint --- .github/workflows/storybook-deployment.yml | 66 +++++++++++----------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/.github/workflows/storybook-deployment.yml b/.github/workflows/storybook-deployment.yml index 4d0265bc..22df860c 100644 --- a/.github/workflows/storybook-deployment.yml +++ b/.github/workflows/storybook-deployment.yml @@ -1,39 +1,39 @@ # Workflow name name: Build and Publish Storybook to GitHub Pages - + on: - # Event for the workflow to run on - push: - branches: - - master - + # Event for the workflow to run on + push: + branches: + - master + permissions: - contents: read - pages: write - id-token: write - + contents: read + pages: write + id-token: write + # List of jobs jobs: - deploy: - environment: - name: github-pages - url: ${{ steps.build-publish.outputs.page_url }} - runs-on: ubuntu-latest - # Job steps - steps: - # Manual Checkout - - uses: actions/checkout@v4 - - # Set up Node - - uses: actions/setup-node@v4 - with: - node-version: '20.x' - - #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow - - id: build-publish - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3 - with: - install_command: npm install # default: npm ci - build_command: npm run build && npm run build-storybook # default: npm run build-storybook - path: storybook-static # default: dist/storybook - checkout: false # default: true \ No newline at end of file + deploy: + environment: + name: github-pages + url: ${{ steps.build-publish.outputs.page_url }} + runs-on: ubuntu-latest + # Job steps + steps: + # Manual Checkout + - uses: actions/checkout@v4 + + # Set up Node + - uses: actions/setup-node@v4 + with: + node-version: '20.x' + + #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow + - id: build-publish + uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3 + with: + install_command: npm install # default: npm ci + build_command: npm run build && npm run build-storybook # default: npm run build-storybook + path: storybook-static # default: dist/storybook + checkout: false # default: true