chore: initialize packages

Author: codebender828

packages/c-color-mode/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@chakra-ui/c-color-mode",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "author": "Jonathan Bakebwa <codebender828@gmail.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui=vue-next/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
+    "build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
+    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
+  },
+  "dependencies": {
+    "@chakra-ui/vue-utils": "*"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.5"
+  }
+}

packages/c-color-mode/src/color-mode-provider.ts

@@ -0,0 +1,33 @@
+import { __DEV__ } from '@chakra-ui/vue-utils'
+import { inject, ref } from 'vue'
+import { ColorMode } from './color-mode.utils'
+
+export type { ColorMode }
+
+export interface ColorModeOptions {
+  initialColorMode?: ColorMode
+  useSystemColorMode?: boolean
+}
+
+interface ColorModeContextType {
+  colorMode: ColorMode
+  toggleColorMode: () => void
+  setColorMode: (value: any) => void
+}
+
+/** Injects color mode into component instance */
+export const useColorMode = () => {
+  const _colorMode = inject('$chakraColorMode') as ColorMode
+  const colorMode = ref(_colorMode)
+
+  const toggleColorMode = () => {
+    colorMode.value = 'light'
+      ? (colorMode.value = 'dark')
+      : (colorMode.value = 'light')
+  }
+
+  return {
+    colorMode,
+    toggleColorMode,
+  }
+}

packages/c-color-mode/src/color-mode.utils.ts

@@ -0,0 +1,85 @@
+import { isBrowser, noop } from '@chakra-ui/vue-utils'
+
+const classNames = {
+  light: 'chakra-ui-light',
+  dark: 'chakra-ui-dark',
+}
+
+export type ColorMode = 'light' | 'dark'
+
+/**
+ * SSR: Graceful fallback for the `body` element
+ */
+const mockBody = {
+  classList: { add: noop, remove: noop },
+}
+
+const getBody = () => (isBrowser ? document.body : mockBody)
+
+/**
+ * Function to add/remove class from `body` based on color mode
+ */
+export function syncBodyClassName(isDark: boolean) {
+  const body = getBody()
+  body.classList.add(isDark ? classNames.dark : classNames.light)
+  body.classList.remove(isDark ? classNames.light : classNames.dark)
+}
+
+/**
+ * Check if JS media query matches the query string passed
+ */
+function getMediaQuery(query: string) {
+  const mediaQueryList = window.matchMedia?.(query)
+  if (!mediaQueryList) {
+    return undefined
+  }
+  return !!mediaQueryList.media === mediaQueryList.matches
+}
+
+export const queries = {
+  light: '(prefers-color-scheme: light)',
+  dark: '(prefers-color-scheme: dark)',
+}
+
+export const lightQuery = queries.light
+export const darkQuery = queries.dark
+
+export function getColorScheme(fallback?: ColorMode) {
+  const isDark = getMediaQuery(queries.dark) ?? fallback === 'dark'
+  return isDark ? 'dark' : 'light'
+}
+
+/**
+ * Adds system os color mode listener, and run the callback
+ * once preference changes
+ */
+export function addListener(fn: Function) {
+  if (!('matchMedia' in window)) {
+    return noop
+  }
+
+  const mediaQueryList = window.matchMedia(queries.dark)
+
+  const listener = () => {
+    fn(mediaQueryList.matches ? 'dark' : 'light')
+  }
+
+  listener()
+  mediaQueryList.addListener(listener)
+
+  return () => {
+    mediaQueryList.removeListener(listener)
+  }
+}
+
+export const root = {
+  get: () =>
+    document.documentElement.style.getPropertyValue(
+      '--chakra-ui-color-mode'
+    ) as ColorMode,
+  set: (mode: ColorMode) => {
+    if (isBrowser) {
+      document.documentElement.style.setProperty('--chakra-ui-color-mode', mode)
+    }
+  },
+}

packages/c-color-mode/src/index.ts

@@ -0,0 +1,2 @@
+export * from './color-mode-provider'
+export * from './storage-manager'

packages/c-color-mode/src/storage-manager.ts

@@ -0,0 +1,61 @@
+import { __DEV__ } from '@chakra-ui/vue-utils'
+import { ColorMode } from './color-mode.utils'
+
+const hasSupport = () => typeof Storage !== 'undefined'
+export const storageKey = 'chakra-ui-color-mode'
+
+type MaybeColorMode = ColorMode | undefined
+
+export interface StorageManager {
+  get(init?: ColorMode): MaybeColorMode
+  set(value: ColorMode): void
+  type: 'cookie' | 'localStorage'
+}
+
+/**
+ * Simple object to handle read-write to localStorage
+ */
+export const localStorageManager: StorageManager = {
+  get(init?) {
+    if (!hasSupport()) return init
+    try {
+      const value = localStorage.getItem(storageKey) as MaybeColorMode
+      return value ?? init
+    } catch (error) {
+      if (__DEV__) {
+        console.log(error)
+      }
+      return init
+    }
+  },
+  set(value) {
+    if (!hasSupport()) return
+    try {
+      localStorage.setItem(storageKey, value)
+    } catch (error) {
+      if (__DEV__) {
+        console.log(error)
+      }
+    }
+  },
+  type: 'localStorage',
+}
+
+/**
+ * Simple object to handle read-write to cookies
+ */
+export const cookieStorageManager = (cookies = ''): StorageManager => ({
+  get(init?) {
+    const match = cookies.match(new RegExp(`(^| )${storageKey}=([^;]+)`))
+
+    if (match) {
+      return match[2] as ColorMode
+    }
+
+    return init
+  },
+  set(value) {
+    document.cookie = `${storageKey}=${value}; max-age=31536000; path=/`
+  },
+  type: 'cookie',
+})

packages/c-color-mode/tests/c-color-mode.test.ts

@@ -0,0 +1,6 @@
+import { CColorMode } from '../'
+
+
+it('should be truthy', () => {
+  expect(1).toBe(1)
+})

packages/c-color-mode/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}