@liner-fe/illust 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @liner-fe/illust
 
+## 0.1.6
+
+### Patch Changes
+
+- c95bf49: feat: illust 추가
+
+## 0.1.5
+
+### Patch Changes
+
+- 99448a8: illust design token 의존성 삭제
+
 ## 0.1.4
 
 ### Patch Changes

package/lib/index.d.ts

@@ -2,8 +2,8 @@ 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"];
+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", "mini-empty-history", "mini-upload", "mini-empty-search"];
+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", "mini-empty-history", "mini-upload", "mini-empty-search"];
 
 type LightIllustType = (typeof illustNames)[number];
 type DarkIllustType = (typeof darkIllustNames)[number];

package/lib/index.js

@@ -40,50 +40,42 @@ var ILLUST = "https://assets.getliner.com/common/illust";
 var DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;
 var LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;
 
-// src/hooks/useIllust.ts
-import { useDarkTheme } from "@liner-fe/design-token";
-var useIllust = /* @__PURE__ */ __name(({ darkSrc, src }) => {
-  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 };
-}, "useIllust");
-
 // src/components/index.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Illust = /* @__PURE__ */ __name((props) => {
   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 : void 0;
+  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
   };
-  const source = `${sourcePrefix}${currentSourceByColorTheme}.webp`;
-  return /* @__PURE__ */ jsx("div", { style: css, children: /* @__PURE__ */ jsx(
-    "img",
-    {
-      ...props,
-      alt: currentSourceByColorTheme,
-      src: source,
-      width,
-      height: aspectRatio ? width / aspectRatio : width
-    }
-  ) });
+  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/illust",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "build": "yarn tsup --config ./config/tsup/tsup.config.ts"
@@ -15,7 +15,6 @@
   "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,8 +1,8 @@
 import { illustSize } from '../constants/size';
 import { CSSProperties, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
-import { useIllust } from '../hooks/useIllust';
 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;
@@ -18,13 +18,16 @@ export interface IllustProps
 
 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,16 +35,24 @@ export const Illust = (props: IllustProps) => {
     margin,
   };
 
-  const source = `${sourcePrefix}${currentSourceByColorTheme}.webp`;
-
   return (
     <div style={css}>
       <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}
+        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/constants/name.ts

@@ -36,6 +36,9 @@ export const illustNames = [
   'mini-pots',
   'mini-erase',
   'mini-rocket',
+  'mini-empty-history',
+  'mini-upload',
+  'mini-empty-search',
 ] as const;
 export const darkIllustNames = [
   'hero-gift',
@@ -75,4 +78,7 @@ export const darkIllustNames = [
   'mini-pots',
   'mini-erase',
   'mini-rocket',
+  'mini-empty-history',
+  'mini-upload',
+  'mini-empty-search',
 ] as const;

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 };
-};