@liner-fe/illust 0.1.1

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@liner-fe/illust",
+  "version": "0.1.1",
+  "scripts": {
+    "build": "yarn tsup --config ./config/tsup/tsup.config.ts"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "main": "./lib/index.js"
+  },
+  "files": [
+    "*"
+  ],
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "dependencies": {
+    "@liner-fe/design-token": "workspace:^",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "esbuild-node-externals": "1.18.0",
+    "tsup": "^8.5.0"
+  }
+}

package/src/components/index.tsx

@@ -0,0 +1,49 @@
+import { illustSize } from '../constants/size';
+import Image, { ImageProps } from 'next/image';
+import { CSSProperties } from 'react';
+import { useIllust } from '../hooks/useIllust';
+import { IllustType } from '../types/illust';
+import { Property } from 'csstype';
+
+export interface Source<T extends false | true = true> {
+  name: IllustType;
+  inverse?: T;
+}
+
+export interface IllustProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill' | 'src'> {
+  width: number;
+  src: { light: Source<false>; dark?: Source };
+  margin?: Property.Margin<string>;
+}
+
+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
+    : undefined;
+
+  const css: CSSProperties = {
+    width,
+    margin,
+  };
+
+  const source = `${sourcePrefix}${currentSourceByColorTheme}.webp`;
+
+  return (
+    <div style={css}>
+      <Image
+        {...props}
+        alt={currentSourceByColorTheme}
+        src={source}
+        width={width}
+        height={aspectRatio ? width / aspectRatio : width}
+        unoptimized
+      />
+    </div>
+  );
+};

package/src/constants/name.ts

@@ -0,0 +1,78 @@
+export const illustNames = [
+  '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',
+] as const;
+export const darkIllustNames = [
+  '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',
+] as const;

package/src/constants/path.ts

@@ -0,0 +1,4 @@
+export const ILLUST = 'https://assets.getliner.com/common/illust';
+
+export const DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;
+export const LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;

package/src/constants/size.ts

@@ -0,0 +1,35 @@
+import { IllustType } from '../types/illust';
+
+const ratio = {
+  '4:3': { width: 180, height: 135 },
+  '1:1': { width: 250, height: 250 },
+};
+
+export const illustSize: Partial<Record<IllustType, { width: number; height: number }>> = {
+  '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'],
+};

package/src/hooks/useIllust.ts

@@ -0,0 +1,27 @@
+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 };
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/index';
+export * from './utils/illust';

package/src/types/illust.ts

@@ -0,0 +1,5 @@
+import { darkIllustNames, illustNames } from '../constants/name';
+
+type LightIllustType = (typeof illustNames)[number];
+type DarkIllustType = (typeof darkIllustNames)[number];
+export type IllustType = DarkIllustType | LightIllustType;

package/src/utils/illust.ts

@@ -0,0 +1,10 @@
+import { ILLUST } from '../constants/path';
+import { IllustType } from '../types/illust';
+
+export const prefetchIllust = async ({
+  name,
+  isDark = false,
+}: {
+  name: IllustType;
+  isDark?: boolean;
+}) => await fetch(`${ILLUST}${isDark ? '/dark/' : '/light/'}${name}.webp`);

package/tsconfig.build.json

@@ -0,0 +1,35 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "incremental": false,
+    "jsx": "react-jsx",
+    "rootDir": "src",
+    "outDir": "lib",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "plugins": [
+      {
+        "name": "next"
+      }
+      // {
+      //   "name": "typescript-plugin-css-modules"
+      // }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "**/*.stories.ts", "**/*.stories.tsx"]
+}

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "noEmit": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "plugins": [
+      {
+        "name": "next"
+      }
+      // {
+      //   "name": "typescript-plugin-css-modules"
+      // }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../illust/src/utils/illust.ts", "../illust/src/types/illust.ts"],
+  "exclude": ["node_modules"]
+}