@channel.io/bezier-react 1.6.1 → 1.6.2
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.
- package/dist/cjs/components/ListItem/ListItem.styled.js +1 -1
- package/dist/cjs/components/Status/Status.styled.js +1 -1
- package/dist/cjs/foundation/FoundationStyledComponent.js +16 -1
- package/dist/cjs/foundation/FoundationStyledComponent.js.map +1 -1
- package/dist/esm/components/ListItem/ListItem.styled.mjs +1 -1
- package/dist/esm/components/Status/Status.styled.mjs +1 -1
- package/dist/esm/foundation/FoundationStyledComponent.mjs +16 -1
- package/dist/esm/foundation/FoundationStyledComponent.mjs.map +1 -1
- package/dist/types/foundation/FoundationStyledComponent.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/foundation/FoundationStyledComponent.tsx +17 -1
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
var DisabledOpacity = require('../../constants/DisabledOpacity.js');
|
|
4
4
|
var ListItem_types = require('./ListItem.types.js');
|
|
5
5
|
var utils = require('./utils.js');
|
|
6
|
-
var index = require('../../foundation/Transition/index.js');
|
|
7
6
|
var Icon = require('../Icon/Icon.js');
|
|
7
|
+
var index = require('../../foundation/Transition/index.js');
|
|
8
8
|
var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
|
|
9
9
|
var Mixins = require('../../foundation/Mixins.js');
|
|
10
10
|
var Typography = require('../../foundation/Typography.js');
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var ZIndex = require('../../constants/ZIndex.js');
|
|
4
|
-
var Mixins = require('../../foundation/Mixins.js');
|
|
5
4
|
var Icon$1 = require('../Icon/Icon.js');
|
|
5
|
+
var Mixins = require('../../foundation/Mixins.js');
|
|
6
6
|
var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
|
|
7
7
|
|
|
8
8
|
const Circle = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
|
|
@@ -13,6 +13,21 @@ var domElements = require('./utils/domElements.js');
|
|
|
13
13
|
* 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* When interpreting the `.mjs` extension in the Next.js environment,
|
|
19
|
+
* default imported `styled` function are not interpreted correctly.
|
|
20
|
+
*
|
|
21
|
+
* We add `.default` to cover situation where the module is interpreted in CJS.
|
|
22
|
+
*
|
|
23
|
+
* This is code that can be removed when the major version of `styled-components` is updated (v6)
|
|
24
|
+
* and `styled` functions are changed to named import.
|
|
25
|
+
*
|
|
26
|
+
* @see https://github.com/rollup/rollup/issues/4438
|
|
27
|
+
* @see https://github.com/styled-components/styled-components/issues/115
|
|
28
|
+
*/
|
|
29
|
+
// @ts-expect-error
|
|
30
|
+
const safetyStyledInNextJs = styled.default ?? styled;
|
|
16
31
|
const FoundationContext = /*#__PURE__*/React.createContext(null);
|
|
17
32
|
function FoundationProvider({
|
|
18
33
|
foundation,
|
|
@@ -53,7 +68,7 @@ function templateFunctionGenerator(BaseComponentGenerator) {
|
|
|
53
68
|
|
|
54
69
|
/* eslint-disable-next-line func-names */ /* @ts-ignore */
|
|
55
70
|
const FoundationStyled = tag => {
|
|
56
|
-
const tagTemplate =
|
|
71
|
+
const tagTemplate = safetyStyledInNextJs(tag);
|
|
57
72
|
return templateFunctionGenerator(tagTemplate);
|
|
58
73
|
};
|
|
59
74
|
domElements.default.forEach(element => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoundationStyledComponent.js","sources":["../../../src/foundation/FoundationStyledComponent.tsx"],"sourcesContent":["/**\n * NOTE:\n * 이 모듈은 Text, Icon 등 뿐 아니라 Colors, Elevation 등에서도 import 하고 있습니다.\n * 이로 인해 Colors(Elevation 등) -> ThemedStyledComponent -> Theme -> Colors(Elevation 등)\n * 의 Circular dependency 가 발생합니다.\n * 하지만 ThemedStyledComponent 에서 사용하는 Theme 은 단순한 interface 로\n * 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.\n */\n\nimport React, {\n createContext,\n forwardRef,\n useContext,\n} from 'react'\n\nimport styled, {\n type AnyStyledComponent,\n type CSSObject,\n type FlattenInterpolation,\n type FlattenSimpleInterpolation,\n type GlobalStyleComponent,\n type Interpolation,\n type InterpolationFunction,\n ServerStyleSheet,\n type SimpleInterpolation,\n type StyledComponentInnerAttrs,\n type StyledComponentInnerComponent,\n type StyledComponentInnerOtherProps,\n type ThemedStyledFunction,\n type ThemedStyledProps,\n css as baseCSS,\n createGlobalStyle as baseCreateGlobalStyle,\n keyframes,\n} from 'styled-components'\n\nimport { type Foundation } from './Foundation'\nimport domElements from './utils/domElements'\n\nconst FoundationContext = createContext<Foundation | null>(null)\n\ninterface FoundationProviderProps {\n foundation: Foundation\n children: React.ReactNode\n}\n\nfunction FoundationProvider({\n foundation,\n children,\n}: FoundationProviderProps) {\n return (\n <FoundationContext.Provider value={foundation}>\n { children }\n </FoundationContext.Provider>\n )\n}\n\n/**\n * NOTE:\n * styled component 는 theme Context 를 갖고 있습니다. 하지만 이 context 를 사용할때는 반드시 'theme' 이라는 이름으로밖에 접근할 수 없습니다.\n * Theme 이라는 용어는 내부적으로 이미 사용하고 있거니와, styled 의 theme 에 해당하는 개념에 Mondrian 은 Foundation 이라는 이름을 붙여주었습니다.\n * 이 괴리를 해소하기 위해 styled 함수를 wrapping 하고 커스텀 context 를 강제 주입합니다.\n * 아래의 interface, type 들은 타입체크 에러를 해소하기 위해 작성되었습니다. 제거 가능한 방법을 찾을 경우 가급적 제거하는 것이 필요합니다.\n */\n\ntype FoundationStyledComponentFactories = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, Foundation, { foundation?: Foundation }>\n}\n\ninterface FoundationStyledInterface extends FoundationStyledComponentFactories {\n <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<\n StyledComponentInnerComponent<C>,\n Foundation,\n StyledComponentInnerOtherProps<C> & { foundation?: Foundation },\n StyledComponentInnerAttrs<C>\n >\n <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`\n // causes tests to fail in TS 3.1\n component: C\n ): ThemedStyledFunction<C, Foundation, { foundation?: Foundation }>\n}\n\nfunction templateFunctionGenerator(BaseComponentGenerator: ThemedStyledFunction<any, any, object, string | number | symbol>) {\n const customTemplateFn = (...args: TemplateStringsArray) => {\n // @ts-ignore\n const BaseComponent = BaseComponentGenerator(...args)\n const BaseRefComponent = forwardRef((props, ref) => {\n const currentFoundation = useContext(FoundationContext)\n return (\n <BaseComponent\n ref={ref}\n key={args.toString()}\n foundation={currentFoundation}\n {...props}\n />\n )\n })\n BaseRefComponent.toString = BaseComponent.toString\n return BaseRefComponent\n }\n customTemplateFn.attrs = (attrs) => templateFunctionGenerator(BaseComponentGenerator.attrs(attrs))\n customTemplateFn.withConfig = (config) => templateFunctionGenerator(BaseComponentGenerator.withConfig(config))\n return customTemplateFn\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst FoundationStyled: FoundationStyledInterface = (tag) => {\n const tagTemplate =
|
|
1
|
+
{"version":3,"file":"FoundationStyledComponent.js","sources":["../../../src/foundation/FoundationStyledComponent.tsx"],"sourcesContent":["/**\n * NOTE:\n * 이 모듈은 Text, Icon 등 뿐 아니라 Colors, Elevation 등에서도 import 하고 있습니다.\n * 이로 인해 Colors(Elevation 등) -> ThemedStyledComponent -> Theme -> Colors(Elevation 등)\n * 의 Circular dependency 가 발생합니다.\n * 하지만 ThemedStyledComponent 에서 사용하는 Theme 은 단순한 interface 로\n * 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.\n */\n\nimport React, {\n createContext,\n forwardRef,\n useContext,\n} from 'react'\n\nimport styled, {\n type AnyStyledComponent,\n type CSSObject,\n type FlattenInterpolation,\n type FlattenSimpleInterpolation,\n type GlobalStyleComponent,\n type Interpolation,\n type InterpolationFunction,\n ServerStyleSheet,\n type SimpleInterpolation,\n type StyledComponentInnerAttrs,\n type StyledComponentInnerComponent,\n type StyledComponentInnerOtherProps,\n type StyledInterface,\n type ThemedStyledFunction,\n type ThemedStyledProps,\n css as baseCSS,\n createGlobalStyle as baseCreateGlobalStyle,\n keyframes,\n} from 'styled-components'\n\nimport { type Foundation } from './Foundation'\nimport domElements from './utils/domElements'\n\n/**\n * When interpreting the `.mjs` extension in the Next.js environment,\n * default imported `styled` function are not interpreted correctly.\n *\n * We add `.default` to cover situation where the module is interpreted in CJS.\n *\n * This is code that can be removed when the major version of `styled-components` is updated (v6)\n * and `styled` functions are changed to named import.\n *\n * @see https://github.com/rollup/rollup/issues/4438\n * @see https://github.com/styled-components/styled-components/issues/115\n */\n// @ts-expect-error\nconst safetyStyledInNextJs = (styled.default ?? styled) as StyledInterface\n\nconst FoundationContext = createContext<Foundation | null>(null)\n\ninterface FoundationProviderProps {\n foundation: Foundation\n children: React.ReactNode\n}\n\nfunction FoundationProvider({\n foundation,\n children,\n}: FoundationProviderProps) {\n return (\n <FoundationContext.Provider value={foundation}>\n { children }\n </FoundationContext.Provider>\n )\n}\n\n/**\n * NOTE:\n * styled component 는 theme Context 를 갖고 있습니다. 하지만 이 context 를 사용할때는 반드시 'theme' 이라는 이름으로밖에 접근할 수 없습니다.\n * Theme 이라는 용어는 내부적으로 이미 사용하고 있거니와, styled 의 theme 에 해당하는 개념에 Mondrian 은 Foundation 이라는 이름을 붙여주었습니다.\n * 이 괴리를 해소하기 위해 styled 함수를 wrapping 하고 커스텀 context 를 강제 주입합니다.\n * 아래의 interface, type 들은 타입체크 에러를 해소하기 위해 작성되었습니다. 제거 가능한 방법을 찾을 경우 가급적 제거하는 것이 필요합니다.\n */\n\ntype FoundationStyledComponentFactories = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, Foundation, { foundation?: Foundation }>\n}\n\ninterface FoundationStyledInterface extends FoundationStyledComponentFactories {\n <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<\n StyledComponentInnerComponent<C>,\n Foundation,\n StyledComponentInnerOtherProps<C> & { foundation?: Foundation },\n StyledComponentInnerAttrs<C>\n >\n <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`\n // causes tests to fail in TS 3.1\n component: C\n ): ThemedStyledFunction<C, Foundation, { foundation?: Foundation }>\n}\n\nfunction templateFunctionGenerator(BaseComponentGenerator: ThemedStyledFunction<any, any, object, string | number | symbol>) {\n const customTemplateFn = (...args: TemplateStringsArray) => {\n // @ts-ignore\n const BaseComponent = BaseComponentGenerator(...args)\n const BaseRefComponent = forwardRef((props, ref) => {\n const currentFoundation = useContext(FoundationContext)\n return (\n <BaseComponent\n ref={ref}\n key={args.toString()}\n foundation={currentFoundation}\n {...props}\n />\n )\n })\n BaseRefComponent.toString = BaseComponent.toString\n return BaseRefComponent\n }\n customTemplateFn.attrs = (attrs) => templateFunctionGenerator(BaseComponentGenerator.attrs(attrs))\n customTemplateFn.withConfig = (config) => templateFunctionGenerator(BaseComponentGenerator.withConfig(config))\n return customTemplateFn\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst FoundationStyled: FoundationStyledInterface = (tag) => {\n const tagTemplate = safetyStyledInNextJs(tag)\n return templateFunctionGenerator(tagTemplate)\n};\n\n(domElements as Array<AnyStyledComponent>).forEach(element => {\n FoundationStyled[element] = FoundationStyled(element)\n})\n\ninterface FoundationCSSInterface {\n (\n first: TemplateStringsArray | CSSObject,\n ...interpolations: SimpleInterpolation[]\n ): FlattenSimpleInterpolation\n (\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>,\n ...interpolations: Array<Interpolation<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>>\n ): FlattenInterpolation<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>\n <P extends object>(\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>,\n ...interpolations: Array<Interpolation<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>>\n ): FlattenInterpolation<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>\n}\n\n/* eslint-disable-next-line func-names */\nconst FoundationCSS: FoundationCSSInterface = baseCSS\n\nfunction useFoundation() {\n return useContext(FoundationContext)\n}\n\ntype GlobalStyleProp = {\n global?: CSSObject\n}\n\ntype FoundationWithGlobalStyle = Foundation & GlobalStyleProp\ninterface CreateFoundationGlobalStyle {\n <P extends object>(\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<P & { foundation?: FoundationWithGlobalStyle }, Foundation>>,\n ...interpolations: Array<Interpolation<ThemedStyledProps<P & { foundation?: FoundationWithGlobalStyle }, Foundation>>>\n ): GlobalStyleComponent<\n // @ts-ignore\n P & { foundation: FoundationWithGlobalStyle },\n ThemedStyledProps<P & { foundation: FoundationWithGlobalStyle }, Foundation>\n >\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst createFoundationGlobalStyle: CreateFoundationGlobalStyle = baseCreateGlobalStyle\n\nexport type {\n GlobalStyleProp,\n}\n\nexport {\n createFoundationGlobalStyle as createGlobalStyle,\n FoundationStyled as styled,\n FoundationCSS as css,\n FoundationProvider,\n useFoundation,\n keyframes,\n ServerStyleSheet,\n}\n"],"names":["safetyStyledInNextJs","styled","default","FoundationContext","createContext","FoundationProvider","foundation","children","React","createElement","Provider","value","templateFunctionGenerator","BaseComponentGenerator","customTemplateFn","args","BaseComponent","BaseRefComponent","forwardRef","props","ref","currentFoundation","useContext","Object","assign","key","toString","attrs","withConfig","config","FoundationStyled","tag","tagTemplate","domElements","forEach","element","FoundationCSS","baseCSS","useFoundation","createFoundationGlobalStyle","baseCreateGlobalStyle"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAgCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,oBAAoB,GAAIC,MAAM,CAACC,OAAO,IAAID,MAA0B,CAAA;AAE1E,MAAME,iBAAiB,gBAAGC,mBAAa,CAAoB,IAAI,CAAC,CAAA;AAOhE,SAASC,kBAAkBA,CAAC;EAC1BC,UAAU;AACVC,EAAAA,QAAAA;AACuB,CAAC,EAAE;AAC1B,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACN,iBAAiB,CAACO,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEL,UAAAA;AAAW,GAAA,EAC1CC,QACwB,CAAC,CAAA;AAEjC,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoBA,SAASK,yBAAyBA,CAACC,sBAAwF,EAAE;AAC3H,EAAA,MAAMC,gBAAgB,GAAGA,CAAC,GAAGC,IAA0B,KAAK;AAC1D;AACA,IAAA,MAAMC,aAAa,GAAGH,sBAAsB,CAAC,GAAGE,IAAI,CAAC,CAAA;IACrD,MAAME,gBAAgB,gBAAGC,gBAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAClD,MAAA,MAAMC,iBAAiB,GAAGC,gBAAU,CAACnB,iBAAiB,CAAC,CAAA;MACvD,oBACEK,KAAA,CAAAC,aAAA,CAACO,aAAa,EAAAO,MAAA,CAAAC,MAAA,CAAA;AACZJ,QAAAA,GAAG,EAAEA,GAAI;AACTK,QAAAA,GAAG,EAAEV,IAAI,CAACW,QAAQ,EAAG;AACrBpB,QAAAA,UAAU,EAAEe,iBAAAA;OACRF,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,KAAC,CAAC,CAAA;AACFF,IAAAA,gBAAgB,CAACS,QAAQ,GAAGV,aAAa,CAACU,QAAQ,CAAA;AAClD,IAAA,OAAOT,gBAAgB,CAAA;GACxB,CAAA;AACDH,EAAAA,gBAAgB,CAACa,KAAK,GAAIA,KAAK,IAAKf,yBAAyB,CAACC,sBAAsB,CAACc,KAAK,CAACA,KAAK,CAAC,CAAC,CAAA;AAClGb,EAAAA,gBAAgB,CAACc,UAAU,GAAIC,MAAM,IAAKjB,yBAAyB,CAACC,sBAAsB,CAACe,UAAU,CAACC,MAAM,CAAC,CAAC,CAAA;AAC9G,EAAA,OAAOf,gBAAgB,CAAA;AACzB,CAAA;;AAEA;AACMgB,MAAAA,gBAA2C,GAAIC,GAAG,IAAK;AAC3D,EAAA,MAAMC,WAAW,GAAGhC,oBAAoB,CAAC+B,GAAG,CAAC,CAAA;EAC7C,OAAOnB,yBAAyB,CAACoB,WAAW,CAAC,CAAA;AAC/C,EAAC;AAEAC,mBAAW,CAA+BC,OAAO,CAACC,OAAO,IAAI;AAC5DL,EAAAA,gBAAgB,CAACK,OAAO,CAAC,GAAGL,gBAAgB,CAACK,OAAO,CAAC,CAAA;AACvD,CAAC,CAAC,CAAA;AAuBF;AACMC,MAAAA,aAAqC,GAAGC,WAAO;AAErD,SAASC,aAAaA,GAAG;EACvB,OAAOhB,gBAAU,CAACnB,iBAAiB,CAAC,CAAA;AACtC,CAAA;AAqBA;AAA0C;AACpCoC,MAAAA,2BAAwD,GAAGC;;;;;;;;;;;;;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import disabledOpacity from '../../constants/DisabledOpacity.mjs';
|
|
2
2
|
import { ListItemVariant } from './ListItem.types.mjs';
|
|
3
3
|
import { getStyleOfSize } from './utils.mjs';
|
|
4
|
-
import { TransitionDuration } from '../../foundation/Transition/index.mjs';
|
|
5
4
|
import { Icon } from '../Icon/Icon.mjs';
|
|
5
|
+
import { TransitionDuration } from '../../foundation/Transition/index.mjs';
|
|
6
6
|
import { css as FoundationCSS, styled as FoundationStyled } from '../../foundation/FoundationStyledComponent.mjs';
|
|
7
7
|
import { ellipsis } from '../../foundation/Mixins.mjs';
|
|
8
8
|
import { LineHeightAbsoluteNumber } from '../../foundation/Typography.mjs';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ZIndex } from '../../constants/ZIndex.mjs';
|
|
2
|
-
import { absoluteCenter } from '../../foundation/Mixins.mjs';
|
|
3
2
|
import { Icon as Icon$1 } from '../Icon/Icon.mjs';
|
|
3
|
+
import { absoluteCenter } from '../../foundation/Mixins.mjs';
|
|
4
4
|
import { styled as FoundationStyled } from '../../foundation/FoundationStyledComponent.mjs';
|
|
5
5
|
|
|
6
6
|
const Circle = /*#__PURE__*/FoundationStyled.div.withConfig({
|
|
@@ -12,6 +12,21 @@ import domElements from './utils/domElements.mjs';
|
|
|
12
12
|
* 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* When interpreting the `.mjs` extension in the Next.js environment,
|
|
18
|
+
* default imported `styled` function are not interpreted correctly.
|
|
19
|
+
*
|
|
20
|
+
* We add `.default` to cover situation where the module is interpreted in CJS.
|
|
21
|
+
*
|
|
22
|
+
* This is code that can be removed when the major version of `styled-components` is updated (v6)
|
|
23
|
+
* and `styled` functions are changed to named import.
|
|
24
|
+
*
|
|
25
|
+
* @see https://github.com/rollup/rollup/issues/4438
|
|
26
|
+
* @see https://github.com/styled-components/styled-components/issues/115
|
|
27
|
+
*/
|
|
28
|
+
// @ts-expect-error
|
|
29
|
+
const safetyStyledInNextJs = styled.default ?? styled;
|
|
15
30
|
const FoundationContext = /*#__PURE__*/createContext(null);
|
|
16
31
|
function FoundationProvider({
|
|
17
32
|
foundation,
|
|
@@ -52,7 +67,7 @@ function templateFunctionGenerator(BaseComponentGenerator) {
|
|
|
52
67
|
|
|
53
68
|
/* eslint-disable-next-line func-names */ /* @ts-ignore */
|
|
54
69
|
const FoundationStyled = tag => {
|
|
55
|
-
const tagTemplate =
|
|
70
|
+
const tagTemplate = safetyStyledInNextJs(tag);
|
|
56
71
|
return templateFunctionGenerator(tagTemplate);
|
|
57
72
|
};
|
|
58
73
|
domElements.forEach(element => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoundationStyledComponent.mjs","sources":["../../../src/foundation/FoundationStyledComponent.tsx"],"sourcesContent":["/**\n * NOTE:\n * 이 모듈은 Text, Icon 등 뿐 아니라 Colors, Elevation 등에서도 import 하고 있습니다.\n * 이로 인해 Colors(Elevation 등) -> ThemedStyledComponent -> Theme -> Colors(Elevation 등)\n * 의 Circular dependency 가 발생합니다.\n * 하지만 ThemedStyledComponent 에서 사용하는 Theme 은 단순한 interface 로\n * 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.\n */\n\nimport React, {\n createContext,\n forwardRef,\n useContext,\n} from 'react'\n\nimport styled, {\n type AnyStyledComponent,\n type CSSObject,\n type FlattenInterpolation,\n type FlattenSimpleInterpolation,\n type GlobalStyleComponent,\n type Interpolation,\n type InterpolationFunction,\n ServerStyleSheet,\n type SimpleInterpolation,\n type StyledComponentInnerAttrs,\n type StyledComponentInnerComponent,\n type StyledComponentInnerOtherProps,\n type ThemedStyledFunction,\n type ThemedStyledProps,\n css as baseCSS,\n createGlobalStyle as baseCreateGlobalStyle,\n keyframes,\n} from 'styled-components'\n\nimport { type Foundation } from './Foundation'\nimport domElements from './utils/domElements'\n\nconst FoundationContext = createContext<Foundation | null>(null)\n\ninterface FoundationProviderProps {\n foundation: Foundation\n children: React.ReactNode\n}\n\nfunction FoundationProvider({\n foundation,\n children,\n}: FoundationProviderProps) {\n return (\n <FoundationContext.Provider value={foundation}>\n { children }\n </FoundationContext.Provider>\n )\n}\n\n/**\n * NOTE:\n * styled component 는 theme Context 를 갖고 있습니다. 하지만 이 context 를 사용할때는 반드시 'theme' 이라는 이름으로밖에 접근할 수 없습니다.\n * Theme 이라는 용어는 내부적으로 이미 사용하고 있거니와, styled 의 theme 에 해당하는 개념에 Mondrian 은 Foundation 이라는 이름을 붙여주었습니다.\n * 이 괴리를 해소하기 위해 styled 함수를 wrapping 하고 커스텀 context 를 강제 주입합니다.\n * 아래의 interface, type 들은 타입체크 에러를 해소하기 위해 작성되었습니다. 제거 가능한 방법을 찾을 경우 가급적 제거하는 것이 필요합니다.\n */\n\ntype FoundationStyledComponentFactories = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, Foundation, { foundation?: Foundation }>\n}\n\ninterface FoundationStyledInterface extends FoundationStyledComponentFactories {\n <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<\n StyledComponentInnerComponent<C>,\n Foundation,\n StyledComponentInnerOtherProps<C> & { foundation?: Foundation },\n StyledComponentInnerAttrs<C>\n >\n <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`\n // causes tests to fail in TS 3.1\n component: C\n ): ThemedStyledFunction<C, Foundation, { foundation?: Foundation }>\n}\n\nfunction templateFunctionGenerator(BaseComponentGenerator: ThemedStyledFunction<any, any, object, string | number | symbol>) {\n const customTemplateFn = (...args: TemplateStringsArray) => {\n // @ts-ignore\n const BaseComponent = BaseComponentGenerator(...args)\n const BaseRefComponent = forwardRef((props, ref) => {\n const currentFoundation = useContext(FoundationContext)\n return (\n <BaseComponent\n ref={ref}\n key={args.toString()}\n foundation={currentFoundation}\n {...props}\n />\n )\n })\n BaseRefComponent.toString = BaseComponent.toString\n return BaseRefComponent\n }\n customTemplateFn.attrs = (attrs) => templateFunctionGenerator(BaseComponentGenerator.attrs(attrs))\n customTemplateFn.withConfig = (config) => templateFunctionGenerator(BaseComponentGenerator.withConfig(config))\n return customTemplateFn\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst FoundationStyled: FoundationStyledInterface = (tag) => {\n const tagTemplate =
|
|
1
|
+
{"version":3,"file":"FoundationStyledComponent.mjs","sources":["../../../src/foundation/FoundationStyledComponent.tsx"],"sourcesContent":["/**\n * NOTE:\n * 이 모듈은 Text, Icon 등 뿐 아니라 Colors, Elevation 등에서도 import 하고 있습니다.\n * 이로 인해 Colors(Elevation 등) -> ThemedStyledComponent -> Theme -> Colors(Elevation 등)\n * 의 Circular dependency 가 발생합니다.\n * 하지만 ThemedStyledComponent 에서 사용하는 Theme 은 단순한 interface 로\n * 동작에는 문제가 없으며, type checking 도 올바르게 됩니다.\n */\n\nimport React, {\n createContext,\n forwardRef,\n useContext,\n} from 'react'\n\nimport styled, {\n type AnyStyledComponent,\n type CSSObject,\n type FlattenInterpolation,\n type FlattenSimpleInterpolation,\n type GlobalStyleComponent,\n type Interpolation,\n type InterpolationFunction,\n ServerStyleSheet,\n type SimpleInterpolation,\n type StyledComponentInnerAttrs,\n type StyledComponentInnerComponent,\n type StyledComponentInnerOtherProps,\n type StyledInterface,\n type ThemedStyledFunction,\n type ThemedStyledProps,\n css as baseCSS,\n createGlobalStyle as baseCreateGlobalStyle,\n keyframes,\n} from 'styled-components'\n\nimport { type Foundation } from './Foundation'\nimport domElements from './utils/domElements'\n\n/**\n * When interpreting the `.mjs` extension in the Next.js environment,\n * default imported `styled` function are not interpreted correctly.\n *\n * We add `.default` to cover situation where the module is interpreted in CJS.\n *\n * This is code that can be removed when the major version of `styled-components` is updated (v6)\n * and `styled` functions are changed to named import.\n *\n * @see https://github.com/rollup/rollup/issues/4438\n * @see https://github.com/styled-components/styled-components/issues/115\n */\n// @ts-expect-error\nconst safetyStyledInNextJs = (styled.default ?? styled) as StyledInterface\n\nconst FoundationContext = createContext<Foundation | null>(null)\n\ninterface FoundationProviderProps {\n foundation: Foundation\n children: React.ReactNode\n}\n\nfunction FoundationProvider({\n foundation,\n children,\n}: FoundationProviderProps) {\n return (\n <FoundationContext.Provider value={foundation}>\n { children }\n </FoundationContext.Provider>\n )\n}\n\n/**\n * NOTE:\n * styled component 는 theme Context 를 갖고 있습니다. 하지만 이 context 를 사용할때는 반드시 'theme' 이라는 이름으로밖에 접근할 수 없습니다.\n * Theme 이라는 용어는 내부적으로 이미 사용하고 있거니와, styled 의 theme 에 해당하는 개념에 Mondrian 은 Foundation 이라는 이름을 붙여주었습니다.\n * 이 괴리를 해소하기 위해 styled 함수를 wrapping 하고 커스텀 context 를 강제 주입합니다.\n * 아래의 interface, type 들은 타입체크 에러를 해소하기 위해 작성되었습니다. 제거 가능한 방법을 찾을 경우 가급적 제거하는 것이 필요합니다.\n */\n\ntype FoundationStyledComponentFactories = {\n [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunction<TTag, Foundation, { foundation?: Foundation }>\n}\n\ninterface FoundationStyledInterface extends FoundationStyledComponentFactories {\n <C extends AnyStyledComponent>(component: C): ThemedStyledFunction<\n StyledComponentInnerComponent<C>,\n Foundation,\n StyledComponentInnerOtherProps<C> & { foundation?: Foundation },\n StyledComponentInnerAttrs<C>\n >\n <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`\n // causes tests to fail in TS 3.1\n component: C\n ): ThemedStyledFunction<C, Foundation, { foundation?: Foundation }>\n}\n\nfunction templateFunctionGenerator(BaseComponentGenerator: ThemedStyledFunction<any, any, object, string | number | symbol>) {\n const customTemplateFn = (...args: TemplateStringsArray) => {\n // @ts-ignore\n const BaseComponent = BaseComponentGenerator(...args)\n const BaseRefComponent = forwardRef((props, ref) => {\n const currentFoundation = useContext(FoundationContext)\n return (\n <BaseComponent\n ref={ref}\n key={args.toString()}\n foundation={currentFoundation}\n {...props}\n />\n )\n })\n BaseRefComponent.toString = BaseComponent.toString\n return BaseRefComponent\n }\n customTemplateFn.attrs = (attrs) => templateFunctionGenerator(BaseComponentGenerator.attrs(attrs))\n customTemplateFn.withConfig = (config) => templateFunctionGenerator(BaseComponentGenerator.withConfig(config))\n return customTemplateFn\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst FoundationStyled: FoundationStyledInterface = (tag) => {\n const tagTemplate = safetyStyledInNextJs(tag)\n return templateFunctionGenerator(tagTemplate)\n};\n\n(domElements as Array<AnyStyledComponent>).forEach(element => {\n FoundationStyled[element] = FoundationStyled(element)\n})\n\ninterface FoundationCSSInterface {\n (\n first: TemplateStringsArray | CSSObject,\n ...interpolations: SimpleInterpolation[]\n ): FlattenSimpleInterpolation\n (\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>,\n ...interpolations: Array<Interpolation<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>>\n ): FlattenInterpolation<ThemedStyledProps<{ foundation?: Foundation }, Foundation>>\n <P extends object>(\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>,\n ...interpolations: Array<Interpolation<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>>\n ): FlattenInterpolation<ThemedStyledProps<P & { foundation?: Foundation }, Foundation>>\n}\n\n/* eslint-disable-next-line func-names */\nconst FoundationCSS: FoundationCSSInterface = baseCSS\n\nfunction useFoundation() {\n return useContext(FoundationContext)\n}\n\ntype GlobalStyleProp = {\n global?: CSSObject\n}\n\ntype FoundationWithGlobalStyle = Foundation & GlobalStyleProp\ninterface CreateFoundationGlobalStyle {\n <P extends object>(\n first:\n | TemplateStringsArray\n | CSSObject\n | InterpolationFunction<ThemedStyledProps<P & { foundation?: FoundationWithGlobalStyle }, Foundation>>,\n ...interpolations: Array<Interpolation<ThemedStyledProps<P & { foundation?: FoundationWithGlobalStyle }, Foundation>>>\n ): GlobalStyleComponent<\n // @ts-ignore\n P & { foundation: FoundationWithGlobalStyle },\n ThemedStyledProps<P & { foundation: FoundationWithGlobalStyle }, Foundation>\n >\n}\n\n/* eslint-disable-next-line func-names */ /* @ts-ignore */\nconst createFoundationGlobalStyle: CreateFoundationGlobalStyle = baseCreateGlobalStyle\n\nexport type {\n GlobalStyleProp,\n}\n\nexport {\n createFoundationGlobalStyle as createGlobalStyle,\n FoundationStyled as styled,\n FoundationCSS as css,\n FoundationProvider,\n useFoundation,\n keyframes,\n ServerStyleSheet,\n}\n"],"names":["safetyStyledInNextJs","styled","default","FoundationContext","createContext","FoundationProvider","foundation","children","React","createElement","Provider","value","templateFunctionGenerator","BaseComponentGenerator","customTemplateFn","args","BaseComponent","BaseRefComponent","forwardRef","props","ref","currentFoundation","useContext","Object","assign","key","toString","attrs","withConfig","config","FoundationStyled","tag","tagTemplate","domElements","forEach","element","FoundationCSS","baseCSS","useFoundation","createFoundationGlobalStyle","baseCreateGlobalStyle"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAgCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,oBAAoB,GAAIC,MAAM,CAACC,OAAO,IAAID,MAA0B,CAAA;AAE1E,MAAME,iBAAiB,gBAAGC,aAAa,CAAoB,IAAI,CAAC,CAAA;AAOhE,SAASC,kBAAkBA,CAAC;EAC1BC,UAAU;AACVC,EAAAA,QAAAA;AACuB,CAAC,EAAE;AAC1B,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACN,iBAAiB,CAACO,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEL,UAAAA;AAAW,GAAA,EAC1CC,QACwB,CAAC,CAAA;AAEjC,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoBA,SAASK,yBAAyBA,CAACC,sBAAwF,EAAE;AAC3H,EAAA,MAAMC,gBAAgB,GAAGA,CAAC,GAAGC,IAA0B,KAAK;AAC1D;AACA,IAAA,MAAMC,aAAa,GAAGH,sBAAsB,CAAC,GAAGE,IAAI,CAAC,CAAA;IACrD,MAAME,gBAAgB,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAClD,MAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACnB,iBAAiB,CAAC,CAAA;MACvD,oBACEK,cAAA,CAAAC,aAAA,CAACO,aAAa,EAAAO,MAAA,CAAAC,MAAA,CAAA;AACZJ,QAAAA,GAAG,EAAEA,GAAI;AACTK,QAAAA,GAAG,EAAEV,IAAI,CAACW,QAAQ,EAAG;AACrBpB,QAAAA,UAAU,EAAEe,iBAAAA;OACRF,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,KAAC,CAAC,CAAA;AACFF,IAAAA,gBAAgB,CAACS,QAAQ,GAAGV,aAAa,CAACU,QAAQ,CAAA;AAClD,IAAA,OAAOT,gBAAgB,CAAA;GACxB,CAAA;AACDH,EAAAA,gBAAgB,CAACa,KAAK,GAAIA,KAAK,IAAKf,yBAAyB,CAACC,sBAAsB,CAACc,KAAK,CAACA,KAAK,CAAC,CAAC,CAAA;AAClGb,EAAAA,gBAAgB,CAACc,UAAU,GAAIC,MAAM,IAAKjB,yBAAyB,CAACC,sBAAsB,CAACe,UAAU,CAACC,MAAM,CAAC,CAAC,CAAA;AAC9G,EAAA,OAAOf,gBAAgB,CAAA;AACzB,CAAA;;AAEA;AACMgB,MAAAA,gBAA2C,GAAIC,GAAG,IAAK;AAC3D,EAAA,MAAMC,WAAW,GAAGhC,oBAAoB,CAAC+B,GAAG,CAAC,CAAA;EAC7C,OAAOnB,yBAAyB,CAACoB,WAAW,CAAC,CAAA;AAC/C,EAAC;AAEAC,WAAW,CAA+BC,OAAO,CAACC,OAAO,IAAI;AAC5DL,EAAAA,gBAAgB,CAACK,OAAO,CAAC,GAAGL,gBAAgB,CAACK,OAAO,CAAC,CAAA;AACvD,CAAC,CAAC,CAAA;AAuBF;AACMC,MAAAA,aAAqC,GAAGC,IAAO;AAErD,SAASC,aAAaA,GAAG;EACvB,OAAOhB,UAAU,CAACnB,iBAAiB,CAAC,CAAA;AACtC,CAAA;AAqBA;AAA0C;AACpCoC,MAAAA,2BAAwD,GAAGC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FoundationStyledComponent.d.ts","sourceRoot":"","sources":["../../../src/foundation/FoundationStyledComponent.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAIN,MAAM,OAAO,CAAA;AAEd,OAAe,EACb,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC1B,gBAAgB,EAChB,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,6BAA6B,EAClC,KAAK,8BAA8B,
|
|
1
|
+
{"version":3,"file":"FoundationStyledComponent.d.ts","sourceRoot":"","sources":["../../../src/foundation/FoundationStyledComponent.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -26,6 +26,7 @@ import styled, {
|
|
|
26
26
|
type StyledComponentInnerAttrs,
|
|
27
27
|
type StyledComponentInnerComponent,
|
|
28
28
|
type StyledComponentInnerOtherProps,
|
|
29
|
+
type StyledInterface,
|
|
29
30
|
type ThemedStyledFunction,
|
|
30
31
|
type ThemedStyledProps,
|
|
31
32
|
css as baseCSS,
|
|
@@ -36,6 +37,21 @@ import styled, {
|
|
|
36
37
|
import { type Foundation } from './Foundation'
|
|
37
38
|
import domElements from './utils/domElements'
|
|
38
39
|
|
|
40
|
+
/**
|
|
41
|
+
* When interpreting the `.mjs` extension in the Next.js environment,
|
|
42
|
+
* default imported `styled` function are not interpreted correctly.
|
|
43
|
+
*
|
|
44
|
+
* We add `.default` to cover situation where the module is interpreted in CJS.
|
|
45
|
+
*
|
|
46
|
+
* This is code that can be removed when the major version of `styled-components` is updated (v6)
|
|
47
|
+
* and `styled` functions are changed to named import.
|
|
48
|
+
*
|
|
49
|
+
* @see https://github.com/rollup/rollup/issues/4438
|
|
50
|
+
* @see https://github.com/styled-components/styled-components/issues/115
|
|
51
|
+
*/
|
|
52
|
+
// @ts-expect-error
|
|
53
|
+
const safetyStyledInNextJs = (styled.default ?? styled) as StyledInterface
|
|
54
|
+
|
|
39
55
|
const FoundationContext = createContext<Foundation | null>(null)
|
|
40
56
|
|
|
41
57
|
interface FoundationProviderProps {
|
|
@@ -105,7 +121,7 @@ function templateFunctionGenerator(BaseComponentGenerator: ThemedStyledFunction<
|
|
|
105
121
|
|
|
106
122
|
/* eslint-disable-next-line func-names */ /* @ts-ignore */
|
|
107
123
|
const FoundationStyled: FoundationStyledInterface = (tag) => {
|
|
108
|
-
const tagTemplate =
|
|
124
|
+
const tagTemplate = safetyStyledInNextJs(tag)
|
|
109
125
|
return templateFunctionGenerator(tagTemplate)
|
|
110
126
|
};
|
|
111
127
|
|