@remember-web/mixin 0.1.6 → 0.1.7

package/dist/mixin/src/provider/index.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { ColorThemeType, ThemeType } from '../colors';
+export interface RUIContentProps {
+    customMixins?: ColorThemeType;
+    forceTheme?: ThemeType;
+    setTheme?: (theme: ThemeType) => void;
+}
+export interface RUIContextValue {
+    currentTheme: ThemeType;
+    setTheme: RUIContentProps['setTheme'];
+}
+/** theme과 setTheme은 사용하는 곳에서 주입,
+ * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */
+export declare function RUIProvider({ children, customMixins, forceTheme, setTheme, }: {
+    children: ReactNode;
+} & RUIContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function useRUI(): RUIContextValue;
+//# sourceMappingURL=index.d.ts.map

package/dist/mixin/src/provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/provider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAK1D,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACvC;AAID;6CAC6C;AAC7C,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,QAAQ,GACT,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,eAAe,2CAa3C;AAED,wBAAgB,MAAM,oBAQrB"}

package/dist/mixin/src/provider/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ColorThemeType, type ThemeType } from '../colors';
+export declare const RUIGlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    customMixins?: ColorThemeType | undefined;
+    forceTheme?: ThemeType | undefined;
+}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/mixin/src/provider/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/provider/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAEzE,eAAO,MAAM,cAAc;;;EAa1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/mixin",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "RUI Mixin",
   "homepage": "https://dramancompany.github.io/rui/",
   "author": "Remember",
@@ -41,6 +41,7 @@
     "@babel/core": "^7.20.12",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.22.5",
     "@remember-web/shared": "workspace:^",
     "@rollup/plugin-babel": "^6.0.4",
@@ -48,6 +49,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "eslint-config-rui": "workspace:*",
+    "react": "^18.2.0",
     "rollup": "^4.13.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
@@ -62,6 +64,7 @@
     "typescript": "^5.4.3"
   },
   "peerDependencies": {
+    "react": "^18.2.0",
     "styled-components": ">=6"
   }
 }

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './colors';
 export * from './mediaQuery';
 export * from './typography';
+// export * from './provider';

package/src/provider/index.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+
+import type { ColorThemeType, ThemeType } from '@/colors';
+import { getBrowserTheme } from '@/colors';
+
+import { RUIGlobalStyle } from './styles';
+
+export interface RUIContentProps {
+  customMixins?: ColorThemeType;
+  forceTheme?: ThemeType;
+  setTheme?: (theme: ThemeType) => void;
+}
+
+export interface RUIContextValue {
+  currentTheme: ThemeType;
+  setTheme: RUIContentProps['setTheme'];
+}
+
+const RUIContext = createContext<RUIContextValue | null>(null);
+
+/** theme과 setTheme은 사용하는 곳에서 주입,
+ * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */
+export function RUIProvider({
+  children,
+  customMixins,
+  forceTheme,
+  setTheme,
+}: { children: ReactNode } & RUIContentProps) {
+  const currentTheme: ThemeType = forceTheme ?? getBrowserTheme();
+  const ruiContextValue: RUIContextValue = useMemo(
+    () => ({ currentTheme, setTheme }),
+    [currentTheme, setTheme]
+  );
+
+  return (
+    <RUIContext.Provider value={ruiContextValue}>
+      <RUIGlobalStyle customMixins={customMixins} forceTheme={forceTheme} />
+      {children}
+    </RUIContext.Provider>
+  );
+}
+
+export function useRUI() {
+  const ruiContextValue = useContext(RUIContext);
+
+  if (ruiContextValue === null) {
+    throw new Error('useRUI must be used within RUIProvider');
+  }
+
+  return ruiContextValue;
+}

package/src/provider/styles.ts

@@ -0,0 +1,36 @@
+'use client';
+
+import { createGlobalStyle, css } from 'styled-components';
+
+import { RUI_COLOR_THEME } from '@/colors/theme';
+import { hexToRgb, type ColorThemeType, type ThemeType } from '@/colors';
+
+export const RUIGlobalStyle = createGlobalStyle<{
+  customMixins?: ColorThemeType;
+  forceTheme?: ThemeType;
+}>(
+  ({ customMixins, forceTheme }) => css`
+    :root {
+      ${getThemeCssFragment({ theme: forceTheme || 'light', customMixins })};
+
+      @media (prefers-color-scheme: dark) {
+        ${getThemeCssFragment({ theme: forceTheme || 'dark', customMixins })}
+      }
+    }
+  `
+);
+
+function getThemeCssFragment({
+  theme,
+  customMixins,
+}: {
+  theme: ThemeType;
+  customMixins?: ColorThemeType;
+}) {
+  return Object.entries({
+    ...RUI_COLOR_THEME[theme],
+    ...customMixins?.[theme],
+  }).map(
+    ([key, value]) => `${key}: ${value}; ${key}__rgb: ${hexToRgb(value)};`
+  );
+}