Merge pull request #404 from web-ridge/remove-unused-styles

Improve maintainability and misc fixes

.nvmrc

@@ -1 +1 @@
-18.15.0
+18.18.0

docusaurus/docs/contributing.md

@@ -165,12 +165,8 @@ Community leaders will follow these Community Impact Guidelines in determining t
 
 ### Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
-available at <https://www.contributor-covenant.org/version/2/0/code_of_conduct.html>.
+This Code of Conduct is adapted from the [Contributor Covenant homepage](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).
 
 Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
 
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see the FAQ at
-<https://www.contributor-covenant.org/faq>. Translations are available at <https://www.contributor-covenant.org/translations>.
+For answers to common questions about this code of conduct, see the [FAQ](https://www.contributor-covenant.org/faq). Translations are [here](https://www.contributor-covenant.org/translations).

docusaurus/docusaurus.config.js

@@ -1,8 +1,8 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github')
-const darkCodeTheme = require('prism-react-renderer/themes/dracula')
+const lightCodeTheme = require('prism-react-renderer').themes.github;
+const darkCodeTheme = require('prism-react-renderer').themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

docusaurus/package.json

@@ -15,19 +15,19 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
+    "@docusaurus/core": "3.4.0",
+    "@docusaurus/preset-classic": "3.4.0",
+    "@mdx-js/react": "^3.0.1",
+    "clsx": "^2.1.1",
     "color": "^4.2.3",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.2.0",
-    "@tsconfig/docusaurus": "^1.0.7",
-    "typescript": "^4.9.5"
+    "@docusaurus/module-type-aliases": "3.4.0",
+    "@tsconfig/docusaurus": "^2.0.3",
+    "typescript": "^5.5.3"
   },
   "browserslist": {
     "production": [

example/app.json

@@ -26,6 +26,7 @@
     },
     "assetBundlePatterns": [
       "**/*"
-    ]
+    ],
+    "userInterfaceStyle": "automatic"
   }
 }

example/babel.config.js

@@ -14,6 +14,7 @@ module.exports = function (api) {
           alias: {
             // For development, we want to alias the library to the source
             [pak.name]: path.join(__dirname, '..', pak.source),
+            'react-native-vector-icons': '@expo/vector-icons',
           },
         },
       ],

example/package.json

@@ -12,19 +12,19 @@
     "test": "jest"
   },
   "dependencies": {
-    "expo": "^50.0.8",
-    "expo-splash-screen": "~0.26.4",
+    "expo": "^50.0.19",
+    "expo-splash-screen": "~0.26.5",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.4",
+    "react-native": "0.73.6",
     "react-native-paper": "^5.12.3",
-    "react-native-web": "~0.19.10"
+    "react-native-web": "~0.19.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.24.8",
     "@expo/webpack-config": "^19.0.1",
     "babel-loader": "^9.1.3",
-    "babel-plugin-module-resolver": "^5.0.0"
+    "babel-plugin-module-resolver": "^5.0.2"
   }
 }

example/src/App.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   StyleSheet,
   ScrollView,
@@ -7,7 +6,6 @@ import {
   Image,
   useWindowDimensions,
   useColorScheme,
-  StatusBar,
 } from 'react-native'
 import {
   SafeAreaProvider,
@@ -25,6 +23,7 @@ import {
   MD3DarkTheme,
   MD3LightTheme,
   MD2LightTheme,
+  MD2DarkTheme,
 } from 'react-native-paper'
 import {
   DatePickerModal,
@@ -57,7 +56,9 @@ import {
   ja,
   th,
 } from 'react-native-paper-dates'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import React from 'react'
+import { StatusBar } from 'expo-status-bar'
 
 const presentationStyles = ['overFullScreen', 'pageSheet'] as const
 const locales: [string, TranslationsType][] = [
@@ -124,7 +125,7 @@ function App({
 
   /** Constants. */
   const maxFontSizeMultiplier = 1.5
-  const dateFormatter = React.useMemo(
+  const dateFormatter = useMemo(
     () =>
       new Intl.DateTimeFormat(locale, {
         day: 'numeric',
@@ -133,12 +134,12 @@ function App({
       }),
     [locale]
   )
-  const timeFormatter = React.useMemo(
+  const timeFormatter = useMemo(
     () =>
       new Intl.DateTimeFormat(locale, {
         hour: '2-digit',
         minute: '2-digit',
-        hour12: false,
+        hour12: locale === 'en',
       }),
     [locale]
   )
@@ -570,9 +571,9 @@ function App({
 
 export default function AppWithProviders() {
   const colorScheme = useColorScheme()
-  const [materialYouEnabled, setMaterialYouEnabled] = React.useState(true)
+  const [materialYouEnabled, setMaterialYouEnabled] = useState(true)
   const m3Theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme
-  const m2Theme = colorScheme === 'dark' ? MD2LightTheme : MD2LightTheme
+  const m2Theme = colorScheme === 'dark' ? MD2DarkTheme : MD2LightTheme
 
   return (
     <SafeAreaProvider>

example/src/ReadMeExampleDatePickerInput.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
-
+import React from 'react'
+import { useState } from 'react'
 import { DatePickerInput } from 'react-native-paper-dates'
 
 export default function ReadMeExampleDatePickerInput() {
-  const [inputDate, setInputDate] = React.useState<Date | undefined>(undefined)
+  const [inputDate, setInputDate] = useState<Date | undefined>(undefined)
 
   return (
     <>

example/src/ReadMeExampleMultiple.tsx

@@ -1,17 +1,18 @@
-import * as React from 'react'
+import React from 'react'
+import { useCallback, useState } from 'react'
 import { Button } from 'react-native-paper'
 
 import { DatePickerModal } from 'react-native-paper-dates'
 
 export default function ReadMeExampleMultiple() {
-  const [dates, setDates] = React.useState<Date[] | undefined>()
-  const [open, setOpen] = React.useState(false)
+  const [dates, setDates] = useState<Date[] | undefined>()
+  const [open, setOpen] = useState(false)
 
-  const onDismiss = React.useCallback(() => {
+  const onDismiss = useCallback(() => {
     setOpen(false)
   }, [setOpen])
 
-  const onConfirm = React.useCallback((params: any) => {
+  const onConfirm = useCallback((params: any) => {
     setOpen(false)
     setDates(params.dates)
     console.log('[on-change-multi]', params)

example/src/ReadMeExampleRange.tsx

@@ -1,21 +1,22 @@
-import * as React from 'react'
+import React from 'react'
+import { useCallback, useState } from 'react'
 import { Button } from 'react-native-paper'
 
 import { DatePickerModal } from 'react-native-paper-dates'
 
 export default function ReadMeExampleRange() {
-  const [range, setRange] = React.useState<{
+  const [range, setRange] = useState<{
     startDate: Date | undefined
     endDate: Date | undefined
   }>({ startDate: undefined, endDate: undefined })
 
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = useState(false)
 
-  const onDismiss = React.useCallback(() => {
+  const onDismiss = useCallback(() => {
     setOpen(false)
   }, [setOpen])
 
-  const onConfirm = React.useCallback(
+  const onConfirm = useCallback(
     ({ startDate, endDate }: any) => {
       setOpen(false)
       setRange({ startDate, endDate })

example/src/ReadMeExampleSingle.tsx

@@ -1,16 +1,17 @@
-import * as React from 'react'
+import React from 'react'
+import { useCallback, useState } from 'react'
 import { Button } from 'react-native-paper'
 import { DatePickerModal } from 'react-native-paper-dates'
 
 export default function ReadMeExampleSingle() {
-  const [date, setDate] = React.useState<Date | undefined>(undefined)
-  const [open, setOpen] = React.useState(false)
+  const [date, setDate] = useState<Date | undefined>(undefined)
+  const [open, setOpen] = useState(false)
 
-  const onDismissSingle = React.useCallback(() => {
+  const onDismissSingle = useCallback(() => {
     setOpen(false)
   }, [setOpen])
 
-  const onConfirmSingle = React.useCallback(
+  const onConfirmSingle = useCallback(
     (params: any) => {
       setOpen(false)
       setDate(params.date)