npm - @charcoal-ui/styled - Versions diffs - 4.2.1 → 4.3.0-beta.0 - Mend

@charcoal-ui/styled 4.2.1 → 4.3.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/index.cjs.js +42 -169
package/dist/index.cjs.js.map +1 -1
package/dist/index.d.ts +1 -2
package/dist/index.d.ts.map +1 -1
package/dist/index.esm.js +39 -159
package/dist/index.esm.js.map +1 -1
package/dist/index.test.d.ts.map +1 -1
package/package.json +7 -5
package/src/index.test.tsx +2 -0
package/src/index.ts +3 -2
package/dist/SetThemeScript.d.ts +0 -21
package/dist/SetThemeScript.d.ts.map +0 -1
package/dist/helper.d.ts +0 -39
package/dist/helper.d.ts.map +0 -1
package/src/SetThemeScript.tsx +0 -56
package/src/helper.ts +0 -180

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/styled",
-  "version": "4.2.1",
+  "version": "4.3.0-beta.0",
   "license": "Apache-2.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.cjs.js",
@@ -21,6 +21,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
+    "@charcoal-ui/react": "4.3.0-beta.0",
     "@types/react": "^18.3.3",
     "@types/react-test-renderer": "^18.3.0",
     "@types/styled-components": "^5.1.21",
@@ -38,12 +39,13 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.2.1",
-    "@charcoal-ui/theme": "^4.2.1",
-    "@charcoal-ui/utils": "^4.2.1",
+    "@charcoal-ui/foundation": "4.3.0-beta.0",
+    "@charcoal-ui/theme": "4.3.0-beta.0",
+    "@charcoal-ui/utils": "4.3.0-beta.0",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
+    "@charcoal-ui/react": "workspace:*",
     "react": ">=17.0.0",
     "styled-components": ">=5.1.1"
   },
@@ -59,5 +61,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/styled"
   },
-  "gitHead": "9a017d7e402dfcf371a5ca9a2b61bcd095467d89"
+  "gitHead": "864fc9a6c8ad391df01c7765ab0dff66842c612d"
 }

package/src/index.test.tsx CHANGED Viewed

@@ -6,6 +6,8 @@ import styled, { ThemeProvider } from 'styled-components'
 import { Example } from './addThemeUtils.story'
 import { MyTheme, myTheme } from './storyHelper'
+import type { JSX } from 'react'
 function render(children: JSX.Element) {
   return renderer
     .create(<ThemeProvider theme={myTheme(light)}>{children}</ThemeProvider>)

package/src/index.ts CHANGED Viewed

@@ -14,10 +14,11 @@ export {
   useThemeSetter,
   useLocalStorage,
   useMedia,
-} from './helper'
+  makeSetThemeScriptCode,
+  SetThemeScript,
+} from '@charcoal-ui/react'
 export { defineThemeVariables } from './util'
 export { removeHalfLeadingCss } from './utils/typographyCss'
-export * from './SetThemeScript'
 type Blank = null | undefined | false

package/dist/SetThemeScript.d.ts DELETED Viewed

@@ -1,21 +0,0 @@
-interface Props {
-    localStorageKey: string;
-    rootAttribute: string;
-}
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns ソースコードの文字列
- */
-export declare function makeSetThemeScriptCode({ localStorageKey, rootAttribute, }?: Partial<Props>): string;
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns
- */
-export declare function SetThemeScript(props: Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace SetThemeScript {
-    var defaultProps: Props;
-}
-export {};
-//# sourceMappingURL=SetThemeScript.d.ts.map

package/dist/SetThemeScript.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"SetThemeScript.d.ts","sourceRoot":"","sources":["../src/SetThemeScript.tsx"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;CACtB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,eAA8C,EAC9C,aAA0C,GAC3C,GAAE,OAAO,CAAC,KAAK,CAAgB,UAa/B;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,2CAS1C;yBATe,cAAc"}

package/dist/helper.d.ts DELETED Viewed

@@ -1,39 +0,0 @@
-export declare const LOCAL_STORAGE_KEY = "charcoal-theme";
-export declare const DEFAULT_ROOT_ATTRIBUTE = "theme";
-/**
- * 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる
- * @param key 検証するキー
- */
-export declare function assertKeyString(key: string): void;
-/**
- * `<html data-theme="dark">` のような設定を行うデフォルトのセッター
- */
-export declare const themeSetter: (attr?: string) => (theme: string | undefined) => void;
-/**
- * `<html data-theme="dark">` にマッチするセレクタを生成する
- */
-export declare function themeSelector<T extends string, S extends string = typeof DEFAULT_ROOT_ATTRIBUTE>(theme: T, attr?: S): `:root[data-theme='${T}']` | `:root[data-${S}='${T}']`;
-/**
- * prefers-color-scheme を利用する media クエリを生成する
- */
-export declare function prefersColorScheme<T extends 'light' | 'dark'>(theme: T): `@media (prefers-color-scheme: ${T})`;
-/**
- * LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks
- */
-export declare function useThemeSetter({ key, setter, }?: {
-    key?: string;
-    setter?: (theme: string | undefined) => void;
-}): void;
-/**
- * 同期的にLocalStorageからテーマを取得するヘルパ
- */
-export declare function getThemeSync(key?: string): string | null;
-/**
- * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
- *
- * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
- */
-export declare const useTheme: (localStorageKey?: string) => readonly ["light" | "dark" | undefined, (value: "light" | "dark" | undefined) => void, boolean];
-export declare function useLocalStorage<T>(key: string, defaultValue?: () => T): readonly [T | undefined, (value: T | undefined) => void, boolean];
-export declare function useMedia(query: string): boolean | undefined;
-//# sourceMappingURL=helper.d.ts.map

package/dist/helper.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../src/helper.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,mBAAmB,CAAA;AACjD,eAAO,MAAM,sBAAsB,UAAU,CAAA;AAI7C;;;GAGG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,QAI1C;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,UACf,MAAM,aACL,MAAM,GAAG,SAAS,SAOzB,CAAA;AAEH;;GAEG;AACH,wBAAgB,aAAa,CAC3B,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,MAAM,GAAG,OAAO,sBAAsB,EAChD,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,0DAEnB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,OAAO,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,yCAEtE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAuB,EACvB,MAAsB,GACvB,GAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;CAAO,QAUrE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,GAAE,MAA0B,iBAG3D;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qBAAqB,MAAM,oGAS/C,CAAA;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,CAAC,oCA6BhD,CAAC,GAAG,SAAS,oBAqBlC;AAmBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,uBAoBrC"}

package/src/SetThemeScript.tsx DELETED Viewed

@@ -1,56 +0,0 @@
-import {
-  assertKeyString,
-  DEFAULT_ROOT_ATTRIBUTE,
-  LOCAL_STORAGE_KEY,
-} from './helper'
-interface Props {
-  localStorageKey: string
-  rootAttribute: string
-}
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns ソースコードの文字列
- */
-export function makeSetThemeScriptCode({
-  localStorageKey = defaultProps.localStorageKey,
-  rootAttribute = defaultProps.rootAttribute,
-}: Partial<Props> = defaultProps) {
-  assertKeyString(localStorageKey)
-  assertKeyString(rootAttribute)
-  return `'use strict';
-(function () {
-    var localStorageKey = '${localStorageKey}'
-    var rootAttribute = '${rootAttribute}'
-    var currentTheme = localStorage.getItem(localStorageKey);
-    if (currentTheme) {
-        document.documentElement.dataset[rootAttribute] = currentTheme;
-    }
-})();
-`
-}
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns
- */
-export function SetThemeScript(props: Props) {
-  const src = makeSetThemeScriptCode(props)
-  return (
-    <script
-      dangerouslySetInnerHTML={{
-        __html: src,
-      }}
-    />
-  )
-}
-const defaultProps: Props = {
-  localStorageKey: LOCAL_STORAGE_KEY,
-  rootAttribute: DEFAULT_ROOT_ATTRIBUTE,
-}
-SetThemeScript.defaultProps = defaultProps

package/src/helper.ts DELETED Viewed

@@ -1,180 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-export const LOCAL_STORAGE_KEY = 'charcoal-theme'
-export const DEFAULT_ROOT_ATTRIBUTE = 'theme'
-const keyStringRegExp = new RegExp(/^(\w|-)+$/)
-/**
- * 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる
- * @param key 検証するキー
- */
-export function assertKeyString(key: string) {
-  if (!keyStringRegExp.test(key)) {
-    throw new Error(`Unexpected key :${key}, expect: /^(\\w|-)+$/`)
-  }
-}
-/**
- * `<html data-theme="dark">` のような設定を行うデフォルトのセッター
- */
-export const themeSetter =
-  (attr: string = DEFAULT_ROOT_ATTRIBUTE) =>
-  (theme: string | undefined) => {
-    assertKeyString(attr)
-    if (theme !== undefined) {
-      document.documentElement.dataset[attr] = theme
-    } else {
-      delete document.documentElement.dataset[attr]
-    }
-  }
-/**
- * `<html data-theme="dark">` にマッチするセレクタを生成する
- */
-export function themeSelector<
-  T extends string,
-  S extends string = typeof DEFAULT_ROOT_ATTRIBUTE
->(theme: T, attr?: S) {
-  return `:root[data-${attr ?? DEFAULT_ROOT_ATTRIBUTE}='${theme}']` as const
-}
-/**
- * prefers-color-scheme を利用する media クエリを生成する
- */
-export function prefersColorScheme<T extends 'light' | 'dark'>(theme: T) {
-  return `@media (prefers-color-scheme: ${theme})` as const
-}
-/**
- * LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks
- */
-export function useThemeSetter({
-  key = LOCAL_STORAGE_KEY,
-  setter = themeSetter(),
-}: { key?: string; setter?: (theme: string | undefined) => void } = {}) {
-  const [theme, , system] = useTheme(key)
-  useEffect(() => {
-    if (theme === undefined) {
-      return
-    }
-    // prefers-color-scheme から値を取っている場合にはcssのみで処理したいのでアンセットする
-    setter(system ? undefined : theme)
-  }, [setter, system, theme])
-}
-/**
- * 同期的にLocalStorageからテーマを取得するヘルパ
- */
-export function getThemeSync(key: string = LOCAL_STORAGE_KEY) {
-  const theme = localStorage.getItem(key)
-  return theme
-}
-/**
- * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
- *
- * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
- */
-export const useTheme = (localStorageKey: string = LOCAL_STORAGE_KEY) => {
-  assertKeyString(localStorageKey)
-  const isDark = useMedia('(prefers-color-scheme: dark)')
-  const media = isDark !== undefined ? (isDark ? 'dark' : 'light') : undefined
-  const [local, setTheme, ready] =
-    useLocalStorage<typeof media>(localStorageKey)
-  const theme = !ready || media === undefined ? undefined : local ?? media
-  const system = local === undefined
-  return [theme, setTheme, system] as const
-}
-export function useLocalStorage<T>(key: string, defaultValue?: () => T) {
-  const [ready, setReady] = useState(false)
-  const [state, setState] = useState<T>()
-  const defaultValueMemo = useMemo(() => defaultValue?.(), [defaultValue])
-  useEffect(() => {
-    fetch()
-    window.addEventListener('storage', handleStorage)
-    return () => {
-      window.removeEventListener('storage', handleStorage)
-    }
-  })
-  const handleStorage = (e: StorageEvent) => {
-    if (e.storageArea !== localStorage) {
-      return
-    }
-    if (e.key !== key) {
-      return
-    }
-    fetch()
-  }
-  const fetch = () => {
-    const raw = localStorage.getItem(key)
-    setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo)
-    setReady(true)
-  }
-  const set = (value: T | undefined) => {
-    if (value === undefined) {
-      // undefinedがセットされる場合にはkeyごと削除
-      localStorage.removeItem(key)
-    } else {
-      const raw = serialize(value)
-      localStorage.setItem(key, raw)
-    }
-    // 同一ウィンドウではstorageイベントが発火しないので、手動で発火させる
-    const event = new StorageEvent('storage', {
-      bubbles: true,
-      cancelable: false,
-      key,
-      url: location.href,
-      storageArea: localStorage,
-    })
-    dispatchEvent(event)
-  }
-  return [state ?? defaultValueMemo, set, ready] as const
-}
-function deserialize<T>(raw: string): T {
-  try {
-    return JSON.parse(raw) as T
-  } catch {
-    // syntax error はすべて文字列として扱う
-    return raw as unknown as T
-  }
-}
-function serialize(value: unknown): string {
-  if (typeof value === 'string') {
-    return value
-  } else {
-    return JSON.stringify(value)
-  }
-}
-export function useMedia(query: string) {
-  const [match, setState] = useState<boolean>()
-  useEffect(() => {
-    const matcher = window.matchMedia(query)
-    const onChange = () => {
-      setState(matcher.matches)
-    }
-    matcher.addEventListener('change', onChange)
-    setState(matcher.matches)
-    return () => {
-      matcher.removeEventListener('change', onChange)
-    }
-  }, [query])
-  return match
-}