@charcoal-ui/styled 2.5.0 → 2.7.0

package/src/builders/o.ts

@@ -13,7 +13,6 @@ import typography from './typography'
  * `theme(o => [...])` の `o` の部分を構築する
  *
  * @param theme テーマオブジェクト
- * @param DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
  */
 export default function createO<T extends CharcoalAbstractTheme>(
   theme: {
@@ -22,14 +21,8 @@ export default function createO<T extends CharcoalAbstractTheme>(
     gradientColor: T['gradientColor']
     border: T['border']
     outline: T['outline']
-  } & Omit<T, 'color' | 'gradientColor' | 'border' | 'outline'>,
-  DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE = false
+  } & Omit<T, 'color' | 'gradientColor' | 'border' | 'outline'>
 ) {
-  if (DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE) {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return {} as never
-  }
-
   return objectAssign(
     colors(theme),
     typography(theme),

package/src/builders/outline.ts

@@ -10,7 +10,7 @@ import {
 } from '../factories/lib'
 
 export const outlineType = ['focus'] as const
-type OutlineType = typeof outlineType[number]
+type OutlineType = (typeof outlineType)[number]
 
 const outlineCss = (weight: number, color: string) => ({
   boxShadow: `0 0 0 ${px(weight)} ${color}`,

package/src/builders/size.ts

@@ -5,7 +5,7 @@ import { Internal, createInternal } from '../internals'
 import { defineProperties, defineConstantProperties } from '../factories/lib'
 
 export const fixedProperties = ['width', 'height'] as const
-type FixedProperty = typeof fixedProperties[number]
+type FixedProperty = (typeof fixedProperties)[number]
 
 export const createFixedPxCss =
   <T extends CharcoalAbstractTheme>(theme: T) =>

package/src/builders/spacing.ts

@@ -14,8 +14,8 @@ export const spacingDirections = [
   'horizontal',
   'all',
 ] as const
-type SpacingProperty = typeof spacingProperties[number]
-type SpacingDirection = typeof spacingDirections[number]
+type SpacingProperty = (typeof spacingProperties)[number]
+type SpacingDirection = (typeof spacingDirections)[number]
 
 function spacingProperty(
   property: SpacingProperty,

package/src/index.story.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import styled, { CSSProp, DefaultTheme, ThemeProvider } from 'styled-components'
-import { CharcoalTheme } from '@charcoal-ui/theme'
-import { Material } from '@charcoal-ui/foundation'
 import { createTheme, ThemeProp, defineThemeVariables } from '.'
 import { disabledSelector } from '@charcoal-ui/utils'
+import { MyTheme, myTheme } from './storyHelper'
 
 export default {
   title: 'styled',
@@ -15,22 +14,6 @@ declare module 'react' {
   }
 }
 
-type MyTheme = CharcoalTheme & {
-  color: {
-    mycolor: Material
-  }
-}
-
-export function myTheme(theme: CharcoalTheme): MyTheme {
-  return {
-    ...theme,
-    color: {
-      ...theme.color,
-      mycolor: '#ff9e8c',
-    },
-  }
-}
-
 declare module 'styled-components' {
   export interface DefaultTheme extends MyTheme {}
 }

package/src/index.test.tsx

@@ -4,7 +4,8 @@ import 'jest-styled-components'
 import React from 'react'
 import renderder from 'react-test-renderer'
 import { ThemeProvider } from 'styled-components'
-import { Example, myTheme, TailwindLike } from './index.story'
+import { Example, TailwindLike } from './index.story'
+import { myTheme } from './storyHelper'
 
 function render(children: JSX.Element) {
   return renderder

package/src/index.ts

@@ -40,18 +40,7 @@ const nonBlank = <T>(value: T): value is T extends Blank ? never : T =>
 export function createTheme<T extends CharcoalAbstractTheme>(
   _styled?: ThemedStyledInterface<T>
 ) {
-  /**
-   * 本当は `type Builder = ReturnType<createO<T>>` みたいな型を作って、それを o の型にしたい。
-   * が、styled がつくられた時点の TypeScript ではこういうジェネリクスの使い方ができなかった
-   * なので代わりに特に意味のない `createO` の呼び出しをやっている
-   */
-  const type_O = createO<T>(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-    {} as any,
-    /** DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE = */ true
-  )
-
-  type Builder = typeof type_O
+  type Builder = ReturnType<typeof createO<T>>
 
   // ランタイムの `theme(o => [...])` のインターフェースを構築する
   return function theme(

package/src/storyHelper.ts

@@ -0,0 +1,18 @@
+import { Material } from '@charcoal-ui/foundation'
+import { CharcoalTheme } from '@charcoal-ui/theme'
+
+export type MyTheme = CharcoalTheme & {
+  color: {
+    mycolor: Material
+  }
+}
+
+export function myTheme(theme: CharcoalTheme): MyTheme {
+  return {
+    ...theme,
+    color: {
+      ...theme.color,
+      mycolor: '#ff9e8c',
+    },
+  }
+}

package/src/util.ts

@@ -90,7 +90,7 @@ export function objectAssign<T extends any[]>(...sources: T) {
  */
 export function keyof<
   // このジェネリクスは必須（書かないと返り値が `never[]` になる ）
-  T,
+  T extends Record<never, unknown>,
   // このジェネリクスは書かなくて良い、obj の内容から推論される（ T と矛盾してはいけない ）
   _ extends T = T
 >(obj: _) {