@liner-fe/illust 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @liner-fe/illust
 
+## 0.1.5
+
+### Patch Changes
+
+- 99448a8: illust design token 의존성 삭제
+
+## 0.1.4
+
+### Patch Changes
+
+- e5cfc5c: ESM으로 전부 마이그레이션
+
 ## 0.1.3
 
 ### Patch Changes

package/config/tsup/tsup.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'tsup';
+import { nodeExternalsPlugin } from 'esbuild-node-externals';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  outDir: 'lib',
+  // 이거는 무슨 옵션일까?
+  // splitting: false,
+  format: 'esm',
+  bundle: true,
+  minify: false,
+  keepNames: true,
+  jsxFactory: 'React.createElement',
+  jsxFragment: 'Fragment',
+  tsconfig: './tsconfig.build.json',
+  platform: 'neutral',
+  dts: true,
+  esbuildPlugins: [nodeExternalsPlugin()],
+});

package/lib/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import { Property } from 'csstype';
+
+declare const illustNames: readonly ["hero-gift", "hero-search", "mini-approve", "mini-documents-2", "mini-documents-3", "mini-documents-4", "mini-documents-5", "mini-documents", "mini-egg", "mini-empty-message", "mini-empty", "mini-gift", "mini-graduation_hat", "mini-not-search", "mini-not-ticket-2", "mini-private", "mini-search", "mini-ticket", "mini-ticket-3", "mini-window", "spot-catch_star", "spot-clap", "spot-empty", "spot-gift", "spot-no_search", "spot-search-2", "spot-search-3", "spot-search-4", "spot-search-5", "spot-search", "spot-sign_up", "spot-team", "spot-write", "mini-sign", "mini-pots", "mini-erase", "mini-rocket"];
+declare const darkIllustNames: readonly ["hero-gift", "hero-search", "mini-approve", "mini-documents-2", "mini-documents-3", "mini-documents-4", "mini-documents-5", "mini-documents", "mini-egg", "mini-empty-message", "mini-empty", "mini-gift", "mini-graduation_hat", "mini-not-search", "mini-not-ticket-2", "mini-private", "mini-search", "mini-ticket", "mini-ticket-3", "mini-window", "spot-catch_star", "spot-clap", "spot-empty", "spot-gift", "spot-no_search", "spot-search-2", "spot-search-3", "spot-search-4", "spot-search-5", "spot-search", "spot-sign_up", "spot-team", "spot-write", "mini-sign", "mini-pots", "mini-erase", "mini-rocket"];
+
+type LightIllustType = (typeof illustNames)[number];
+type DarkIllustType = (typeof darkIllustNames)[number];
+type IllustType = DarkIllustType | LightIllustType;
+
+interface Source<T extends false | true = true> {
+    name: IllustType;
+    inverse?: T;
+}
+interface IllustProps extends Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> {
+    width: number;
+    src: {
+        light: Source<false>;
+        dark?: Source;
+    };
+    margin?: Property.Margin<string>;
+}
+declare const Illust: (props: IllustProps) => react_jsx_runtime.JSX.Element;
+
+declare const prefetchIllust: ({ name, isDark, }: {
+    name: IllustType;
+    isDark?: boolean;
+}) => Promise<Response>;
+
+export { Illust, type IllustProps, type Source, prefetchIllust };

package/lib/index.js

@@ -0,0 +1,89 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/constants/size.ts
+var ratio = {
+  "4:3": { width: 180, height: 135 },
+  "1:1": { width: 250, height: 250 }
+};
+var illustSize = {
+  "hero-gift": ratio["1:1"],
+  "hero-search": ratio["1:1"],
+  "mini-documents-2": ratio["1:1"],
+  "mini-documents-3": ratio["1:1"],
+  "mini-documents-4": ratio["1:1"],
+  "mini-documents-5": ratio["1:1"],
+  "mini-documents": ratio["1:1"],
+  "mini-egg": ratio["1:1"],
+  "mini-gift": ratio["1:1"],
+  "mini-graduation_hat": ratio["1:1"],
+  "mini-search": ratio["1:1"],
+  "mini-ticket": ratio["1:1"],
+  "mini-window": ratio["1:1"],
+  "spot-catch_star": ratio["4:3"],
+  "spot-clap": ratio["4:3"],
+  "spot-empty": ratio["4:3"],
+  "spot-no_search": ratio["4:3"],
+  "spot-search-2": ratio["4:3"],
+  "spot-search-3": ratio["4:3"],
+  "spot-search-4": ratio["4:3"],
+  "spot-search-5": ratio["4:3"],
+  "spot-search": ratio["4:3"],
+  "spot-write": ratio["4:3"],
+  "spot-gift": ratio["4:3"],
+  "mini-empty": ratio["1:1"],
+  "spot-team": ratio["4:3"]
+};
+
+// src/constants/path.ts
+var ILLUST = "https://assets.getliner.com/common/illust";
+var DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;
+var LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;
+
+// src/components/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Illust = /* @__PURE__ */ __name((props) => {
+  const { src, width, margin } = props;
+  const darkSource = src.dark?.name || src.light.name;
+  const lightSource = src.light.name;
+  const aspectRatioDark = illustSize[darkSource] ? illustSize[darkSource].width / illustSize[darkSource].height : void 0;
+  const aspectRatio = illustSize[lightSource] ? illustSize[lightSource].width / illustSize[lightSource].height : void 0;
+  const css = {
+    width,
+    margin
+  };
+  return /* @__PURE__ */ jsxs("div", { style: css, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...props,
+        alt: lightSource,
+        src: `${src.light.inverse === false ? DARK_MODE_ILLUST_PREFIX : LIGHT_MODE_ILLUST_PREFIX}${lightSource}.webp`,
+        width,
+        height: aspectRatio ? width / aspectRatio : width,
+        "data-hide-on-theme": "dark"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...props,
+        alt: darkSource,
+        src: `${src.dark?.inverse ? LIGHT_MODE_ILLUST_PREFIX : DARK_MODE_ILLUST_PREFIX}${darkSource}.webp`,
+        width,
+        height: aspectRatioDark ? width / aspectRatioDark : width,
+        "data-hide-on-theme": "light"
+      }
+    )
+  ] });
+}, "Illust");
+
+// src/utils/illust.ts
+var prefetchIllust = /* @__PURE__ */ __name(async ({
+  name,
+  isDark = false
+}) => await fetch(`${ILLUST}${isDark ? "/dark/" : "/light/"}${name}.webp`), "prefetchIllust");
+export {
+  Illust,
+  prefetchIllust
+};

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@liner-fe/illust",
-  "version": "0.1.3",
+  "version": "0.1.5",
+  "type": "module",
   "scripts": {
-    "build": ""
+    "build": "yarn tsup --config ./config/tsup/tsup.config.ts"
   },
-  "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "main": "./lib/index.js"
   },
   "files": [
     "*"
   ],
-  "main": "./src/index.ts",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "dependencies": {
-    "@liner-fe/design-token": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/components/index.tsx

@@ -1,16 +1,16 @@
 import { illustSize } from '../constants/size';
-import Image, { ImageProps } from 'next/image';
-import { CSSProperties } from 'react';
-import { useIllust } from '../hooks/useIllust';
+import { CSSProperties, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
 import { IllustType } from '../types/illust';
 import { Property } from 'csstype';
+import { DARK_MODE_ILLUST_PREFIX, LIGHT_MODE_ILLUST_PREFIX } from '@/constants/path';
 
 export interface Source<T extends false | true = true> {
   name: IllustType;
   inverse?: T;
 }
 
-export interface IllustProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill' | 'src'> {
+export interface IllustProps
+  extends Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> {
   width: number;
   src: { light: Source<false>; dark?: Source };
   margin?: Property.Margin<string>;
@@ -18,13 +18,16 @@ export interface IllustProps extends Omit<ImageProps, 'alt' | 'width' | 'height'
 
 export const Illust = (props: IllustProps) => {
   const { src, width, margin } = props;
-  const { sourcePrefix, currentSourceByColorTheme } = useIllust({
-    darkSrc: src.dark,
-    src: src.light,
-  });
 
-  const aspectRatio = illustSize[currentSourceByColorTheme]
-    ? illustSize[currentSourceByColorTheme].width / illustSize[currentSourceByColorTheme].height
+  const darkSource = src.dark?.name || src.light.name;
+  const lightSource = src.light.name;
+
+  const aspectRatioDark = illustSize[darkSource]
+    ? illustSize[darkSource].width / illustSize[darkSource].height
+    : undefined;
+
+  const aspectRatio = illustSize[lightSource]
+    ? illustSize[lightSource].width / illustSize[lightSource].height
     : undefined;
 
   const css: CSSProperties = {
@@ -32,17 +35,24 @@ export const Illust = (props: IllustProps) => {
     margin,
   };
 
-  const source = `${sourcePrefix}${currentSourceByColorTheme}.webp`;
-
   return (
     <div style={css}>
-      <Image
+      <img
         {...props}
-        alt={currentSourceByColorTheme}
-        src={source}
+        alt={lightSource}
+        src={`${src.light.inverse === false ? DARK_MODE_ILLUST_PREFIX : LIGHT_MODE_ILLUST_PREFIX}${lightSource}.webp`}
         width={width}
         height={aspectRatio ? width / aspectRatio : width}
-        unoptimized
+        data-hide-on-theme={'dark'}
+      />
+      {/* dark */}
+      <img
+        {...props}
+        alt={darkSource}
+        src={`${src.dark?.inverse ? LIGHT_MODE_ILLUST_PREFIX : DARK_MODE_ILLUST_PREFIX}${darkSource}.webp`}
+        width={width}
+        height={aspectRatioDark ? width / aspectRatioDark : width}
+        data-hide-on-theme={'light'}
       />
     </div>
   );

package/src/hooks/useIllust.ts

@@ -1,27 +0,0 @@
-import { Source } from '../components/index';
-import { DARK_MODE_ILLUST_PREFIX, LIGHT_MODE_ILLUST_PREFIX } from '../constants/path';
-import { useDarkTheme } from '@liner-fe/design-token';
-
-export const useIllust = ({ darkSrc, src }: { darkSrc?: Source; src: Source<false> }) => {
-  const { isDarkMode } = useDarkTheme();
-
-  const sourcePrefix = (() => {
-    if (isDarkMode) {
-      if (darkSrc?.inverse) {
-        return LIGHT_MODE_ILLUST_PREFIX;
-      }
-
-      return DARK_MODE_ILLUST_PREFIX;
-    }
-
-    if (src.inverse === false) {
-      return DARK_MODE_ILLUST_PREFIX;
-    }
-
-    return LIGHT_MODE_ILLUST_PREFIX;
-  })();
-
-  const currentSourceByColorTheme = isDarkMode ? darkSrc?.name || src.name : src.name;
-
-  return { sourcePrefix, currentSourceByColorTheme, isDarkMode };
-};