Merge pull request #6 from zolplay-cn/cali

Add query package and datetime utils

packages/config/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zolplay/config
 
+## 0.1.1
+
+### Patch Changes
+
+- Release update
+
 ## 0.1.0
 
 ### Minor Changes

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zolplay/config",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "index.js",
   "license": "MIT",
   "files": [

packages/cva/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zolplay/cva
 
+## 0.1.1
+
+### Patch Changes
+
+- Release update
+
 ## 0.1.0
 
 ### Minor Changes

packages/cva/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zolplay/cva",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.mjs",

packages/query/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@zolplay/config/eslint/preset')

packages/query/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@zolplay/config/prettier/preset')

packages/query/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @zolplay/query
+
+## 0.1.0
+
+### Minor Changes
+
+- Release update
+
+### Patch Changes
+
+- Updated dependencies
+  - @zolplay/config@0.1.1
+
+## 0.1.0
+
+### Minor Changes
+
+- Initial release

packages/query/README.md

@@ -0,0 +1,6 @@
+# @zolplay/query
+
+![npm](https://img.shields.io/npm/v/@zolplay/query?color=%23EEE)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/@zolplay/query)
+
+An adapter for the awesome original package `@tanstack/react-query`.

packages/query/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@zolplay/query",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "pnpm run build --watch",
+    "lint": "eslint . --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "@zolplay/config": "workspace:*",
+    "@tanstack/react-query": "^4.12.0",
+    "@tanstack/react-query-devtools": "^4.12.0"
+  },
+  "devDependencies": {
+    "@zolplay/tsconfig": "workspace:*",
+    "typescript": "^4.8.4"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2||^18.0.0",
+    "react-dom": "^17.0.0||^18.0.0"
+  }
+}

packages/query/src/index.ts

@@ -0,0 +1,26 @@
+import { QueryClient, QueryClientConfig } from '@tanstack/react-query'
+
+export const createQueryClient = (config?: QueryClientConfig) =>
+  new QueryClient(config)
+export type {
+  InfiniteData,
+  MutationFunction,
+  MutationKey,
+  MutationOptions,
+  QueryFunction,
+  QueryKey,
+  QueryOptions,
+  UseInfiniteQueryOptions,
+  UseMutationOptions,
+  UseQueryOptions,
+} from '@tanstack/react-query'
+export {
+  QueryClient,
+  QueryClientProvider,
+  useInfiniteQuery,
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+export { ReactQueryDevtools as QueryDevtools } from '@tanstack/react-query-devtools'

packages/query/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@zolplay/tsconfig/public-base.json",
+  "compilerOptions": {
+    "target": "ESNext"
+  }
+}

packages/tsconfig/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zolplay/tsconfig
 
+## 0.1.1
+
+### Patch Changes
+
+- Release update
+
 ## 0.1.0
 
 ### Minor Changes

packages/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zolplay/tsconfig",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "files": [
     "base.json",

packages/utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zolplay/utils
 
+## 1.2.0
+
+### Minor Changes
+
+- Release update
+
 ## 1.1.2
 
 ### Patch Changes

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zolplay/utils",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.mjs",
@@ -21,6 +21,7 @@
   "dependencies": {
     "axios": "^1.1.3",
     "clsx": "^1.2.1",
+    "dayjs": "^1.11.5",
     "tailwind-merge": "^1.6.2"
   },
   "repository": {

packages/utils/src/datetime.ts

@@ -0,0 +1,73 @@
+import type { Dayjs } from 'dayjs'
+import dayjs, { ConfigType } from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+
+export type DateTime = Dayjs
+export type DateTimeProps = {
+  date: DateTime | null | undefined
+  format?: string
+  relative?: boolean
+}
+
+type ExtendOptions = {
+  utc?: boolean
+  timezone?: boolean
+  relativeTime?: boolean
+}
+export function extendDateTime(
+  options: ExtendOptions = { utc: true, timezone: true, relativeTime: true }
+) {
+  if (options.utc) {
+    dayjs.extend(utc)
+  }
+  if (options.timezone) {
+    dayjs.extend(timezone)
+  }
+  if (options.relativeTime) {
+    dayjs.extend(relativeTime)
+  }
+}
+
+type ParseOptions = {
+  date?: ConfigType
+  timezone?: string
+}
+/**
+ * Parse a datetime string in UTC to a local timezone
+ *
+ * @ref https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+ * @ref https://day.js.org/docs/en/parse/utc
+ */
+export const parseDateTime = ({
+  date,
+  timezone,
+}: ParseOptions): DateTime | null => {
+  if (!date) {
+    return null
+  }
+
+  try {
+    return dayjs(dayjs.utc(date)).tz(timezone ?? dayjs.tz.guess())
+  } catch {
+    return dayjs(date)
+  }
+}
+
+/**
+ * Format a datetime to human readable format
+ *
+ * @ref https://day.js.org/docs/en/display/from-now
+ * @ref https://day.js.org/docs/en/display/difference
+ */
+export const formatDateTime = ({
+  date,
+  format,
+  relative,
+}: DateTimeProps): string => {
+  if (!date) return ''
+  if (!relative) return date.format(format)
+
+  return date.fromNow()
+}

packages/utils/src/index.ts

@@ -1,2 +1,5 @@
 export * from './api'
+export * from './datetime'
 export * from './helpers'
+
+export type Nullable<T> = null | undefined | T