@remember-web/mixin 0.0.0-alpha.1

package/.eslintrc.js

@@ -0,0 +1,11 @@
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+module.exports = {
+  extends: ['rui'],
+  root: true,
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.eslint.json'],
+  },
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@remember-web/mixin",
+  "version": "0.0.0-alpha.1",
+  "description": "RUI Mixin",
+  "homepage": "https://dramancompany.github.io/rui/",
+  "author": "Remember",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dramancompany/rui.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rollup -c && yarn fix:dts-alias",
+    "fix:dts-alias": "yarn tsc-alias -p tsconfig.alias.json"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-typescript": "^7.22.5",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@svgr/rollup": "^6.5.1",
+    "eslint-config-rui": "workspace:*",
+    "rollup": "^4.13.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-ts": "^3.4.5",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "styled-components": ">=6",
+    "tsc-alias": "^1.8.8",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.4.3",
+    "@remember-web/shared": "workspace:^"
+  },
+  "peerDependencies": {
+    "styled-components": ">=6"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,105 @@
+import { DEFAULT_EXTENSIONS } from '@babel/core';
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import fs from 'fs';
+import path from 'path';
+import { defineConfig } from 'rollup';
+import ts from 'rollup-plugin-ts';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import preserveDirectives from 'rollup-plugin-preserve-directives';
+import typescript from 'rollup-plugin-typescript2';
+
+const PACKAGE_DIST_DIR = './dist';
+const SOURCE_DIR = './src';
+
+const extensions = [...DEFAULT_EXTENSIONS, '.ts', '.tsx', '.json', '.mts'];
+
+const defaultPlugins = [
+  peerDepsExternal({ includeDependencies: true }),
+  nodeResolve({
+    extensions,
+  }),
+  commonjs({
+    sourceMap: true,
+  }),
+];
+
+export default async () => {
+  // ./dist 폴더가 없다면 생성, 있다면 제거
+  if (fs.existsSync(PACKAGE_DIST_DIR)) {
+    fs.rmSync(PACKAGE_DIST_DIR, { recursive: true });
+  }
+
+  return defineConfig([
+    {
+      plugins: [
+        ...defaultPlugins,
+        typescript({
+          tsconfigOverride: {
+            compilerOptions: {
+              noEmit: true,
+            },
+          },
+        }),
+        babel({
+          sourceMap: true,
+          extensions,
+          // babelHelper를 번들에 포함하지 않고 런타임에서 사용하는 시점에 불러오도록 설정
+          babelHelpers: 'runtime',
+          presets: ['@babel/preset-env', '@babel/preset-typescript'],
+          plugins: ['@babel/plugin-transform-runtime'],
+        }),
+        preserveDirectives(),
+      ],
+      input: path.join(SOURCE_DIR, 'index.ts'),
+      output: getOutputOption('cjs'),
+      external: [/@babel\/runtime/],
+      onwarn(warning, warn) {
+        if (warning.code !== 'MODULE_LEVEL_DIRECTIVE') {
+          warn(warning);
+        }
+      },
+    },
+    {
+      plugins: [
+        defaultPlugins,
+        ts({
+          transpiler: 'typescript',
+          browserslist: false,
+          tsconfig: (tsconfig) => ({
+            ...tsconfig,
+            declaration: true,
+            emitDeclarationOnly: true,
+            declarationDir: './dist',
+            sourceMap: true,
+            declarationMap: true,
+          }),
+        }),
+        preserveDirectives(),
+      ],
+      input: path.join(SOURCE_DIR, 'index.ts'),
+      output: getOutputOption('esm'),
+      onwarn(warning, warn) {
+        if (warning.code !== 'MODULE_LEVEL_DIRECTIVE') {
+          warn(warning);
+        }
+      },
+    },
+  ]);
+};
+
+/** @type {(type: 'esm' | 'cjs') => import('rollup').OutputOptions} */
+function getOutputOption(format) {
+  const extension = { esm: 'js', cjs: 'cjs' }[format];
+  return {
+    dir: PACKAGE_DIST_DIR,
+    sourcemap: true,
+    format,
+    entryFileNames: `[name].${extension}`,
+    chunkFileNames: `chunks/[hash]/[name].${extension}`,
+    interop: 'auto',
+    preserveModules: true,
+    preserveModulesRoot: SOURCE_DIR,
+  };
+}

package/src/colors/index.ts

@@ -0,0 +1,2 @@
+export * from './variables';
+export * from './utils';

package/src/colors/theme.ts

@@ -0,0 +1,73 @@
+import type { RUIColorThemeType } from './types';
+
+/**
+ * {@link https://www.figma.com/file/2qQ5eJPRTiAKyz6Q1IzfMJ/WEB?node-id=2570%3A12136&viewport=347%2C475%2C0.47}
+ */
+export const RUI_COLOR_THEME: RUIColorThemeType = {
+  light: {
+    '--rui-primary100': '#000000',
+    '--rui-primary200': '#FFFFFF',
+    '--rui-secondary100': '#FF6A0D',
+    '--rui-contents000': '#000000',
+    '--rui-contents100': '#424242',
+    '--rui-contents150': '#808080',
+    '--rui-contents200': '#BDBDBD',
+    '--rui-contents300': '#D4D4D4',
+    '--rui-contents999': '#FFFFFF',
+    '--rui-disabled': '#D4D4D4',
+    '--rui-disabled-role-red': '#F7ABAB',
+    '--rui-disabled-secondary': '#FFE3D1',
+    '--rui-role-red': '#ED4E4E',
+    '--rui-role-yellow': '#EDC84E',
+    '--rui-role-blue': '#2679ED',
+    '--rui-role-green': '#21C798',
+    '--rui-bg100': '#FFFFFF',
+    '--rui-bg200': '#FAFAFA',
+    '--rui-bg300': '#F2F2F2',
+    '--rui-bg-modal100': '#FFFFFF',
+    '--rui-bg-modal200': '#FAFAFA',
+    '--rui-bg-role-red': '#FFF5F5',
+    '--rui-bg-secondary100': '#FFF4ED',
+    '--rui-bg-highlight': '#FCF5DC',
+    '--rui-bg-role-yellow': '#FFFDF5',
+    '--rui-bg-role-blue': '#EDF4FF',
+    '--rui-bg-role-green': '#D9FCF2',
+    '--rui-divider': '#D4D4D4',
+    '--rui-fixed-white': '#FFFFFF',
+    '--rui-fixed-black': '#000000',
+    '--rui-fixed-bg-white': '#FFFFFF',
+  },
+  dark: {
+    '--rui-primary100': '#FFFFFF',
+    '--rui-primary200': '#000000',
+    '--rui-secondary100': '#FF6A0D',
+    '--rui-contents000': '#FFFFFF',
+    '--rui-contents100': '#EBEBEB',
+    '--rui-contents150': '#D4D4D4',
+    '--rui-contents200': '#BDBDBD',
+    '--rui-contents300': '#808080',
+    '--rui-contents999': '#000000',
+    '--rui-disabled': '#808080',
+    '--rui-disabled-role-red': '#6B2424',
+    '--rui-disabled-secondary': '#4D2A14',
+    '--rui-role-red': '#D13636',
+    '--rui-role-yellow': '#D1AD36',
+    '--rui-role-blue': '#085DD4',
+    '--rui-role-green': '#22B28A',
+    '--rui-bg100': '#1A1A1A',
+    '--rui-bg200': '#000000',
+    '--rui-bg300': '#000000',
+    '--rui-bg-modal100': '#2E2E2E',
+    '--rui-bg-modal200': '#424242',
+    '--rui-bg-role-red': '#381515',
+    '--rui-bg-secondary100': '#331D0F',
+    '--rui-bg-highlight': '#383015',
+    '--rui-bg-role-yellow': '#383015',
+    '--rui-bg-role-blue': '#002861',
+    '--rui-bg-role-green': '#15382E',
+    '--rui-divider': '#424242',
+    '--rui-fixed-white': '#FFFFFF',
+    '--rui-fixed-black': '#000000',
+    '--rui-fixed-bg-white': '#FFFFFF',
+  },
+};

package/src/colors/types.ts

@@ -0,0 +1,30 @@
+export type GetVariableName<C> = C extends `var(${infer R})` ? R : never;
+
+export type ThemeType = 'light' | 'dark';
+
+/**
+ * Variable = CSS변수로 사용되는 명칭
+ * VariableName = CSS변수로 사용되는 명칭에서 `var()`를 제거한 실제명칭
+ */
+
+export type ColorVariable<V extends string = string> = `var(--rui-${V})`;
+export type ColorVariableName<V extends string = string> = GetVariableName<
+  ColorVariable<V>
+>;
+export type ColorSet = Record<ColorVariableName, string>;
+
+export type RUIColorType = typeof import('./variables');
+export type RUIColorName = keyof RUIColorType;
+
+export type RUIColorVariable = RUIColorType[RUIColorName];
+export type RUIColorVariableName = GetVariableName<RUIColorVariable>;
+export type RUIColorSet = Record<RUIColorVariableName, string>;
+
+export type ColorThemeType = {
+  [key in ThemeType]: ColorSet;
+};
+export type RUIColorThemeType = {
+  [key in ThemeType]: RUIColorSet;
+};
+
+export {};

package/src/colors/utils.ts

@@ -0,0 +1,68 @@
+import { isSSR } from '@remember-web/shared/utils/common';
+
+import type {
+  ColorVariable,
+  ColorVariableName,
+  RUIColorVariable,
+  ThemeType,
+} from './types';
+import { RUI_COLOR_THEME } from './theme';
+
+/** var(color)로 된 string을 color로 변경해줄 때 사용 */
+export function getColorVariableName<V extends string = string>(
+  color: ColorVariable<V>
+) {
+  return color.slice(4, -1) as ColorVariableName<V>;
+}
+
+/** RDS컬러의 rgb값이 필요할 때 사용ValidityState
+ * @example css`color: rgba(${getRgb(contents000)},0.5)`
+ */
+export function getRgb(color: ColorVariable) {
+  return `var(${getColorVariableName(color)}__rgb)`;
+}
+
+/** RDS컬러를 통해서 css의 rgba함수를 사용
+ * @example css`color: ${getRgb(contents000, 0.5)}`
+ * @example css`box-shadow: 0 0 0 5px ${getRgb(contents000, 0.5)}`
+ */
+export function getRgba(color: ColorVariable, opacity: number | `${number}%`) {
+  return `rgba(${getRgb(color)},${opacity})`;
+}
+
+/** hex로 된 컬러값을 rgb값으로 변경해줌 */
+export function hexToRgb(colorHex: string) {
+  let hexWithoutHash = colorHex.replace('#', '');
+
+  if (hexWithoutHash.length !== 3 && hexWithoutHash.length !== 6) {
+    throw new Error('Invalid hex color');
+  }
+
+  if (hexWithoutHash.length === 3) {
+    hexWithoutHash = [...hexWithoutHash].map((hex) => hex.repeat(2)).join();
+  }
+
+  const [, r, g, b] = hexWithoutHash
+    .split(/(..)(..)(..)/)
+    .map((hex) => parseInt(hex, 16));
+
+  return `${r},${g},${b}`;
+}
+
+export function getBrowserTheme(): ThemeType {
+  if (!isSSR() && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+  return 'light';
+}
+
+/** css variable을 hex로 반환 */
+export function getHexFromRuiCssVariable({
+  colorVariable,
+  theme,
+}: {
+  theme: ThemeType;
+  colorVariable: RUIColorVariable;
+}) {
+  return RUI_COLOR_THEME[theme][getColorVariableName(colorVariable)];
+}

package/src/colors/variables.ts

@@ -0,0 +1,43 @@
+export const primary100 = 'var(--rui-primary100)';
+export const primary200 = 'var(--rui-primary200)';
+export const secondary100 = 'var(--rui-secondary100)';
+
+// Contents  txt/ label/ border/ divider
+export const contents000 = 'var(--rui-contents000)';
+export const contents100 = 'var(--rui-contents100)';
+export const contents150 = 'var(--rui-contents150)';
+export const contents200 = 'var(--rui-contents200)';
+export const contents300 = 'var(--rui-contents300)';
+export const contents999 = 'var(--rui-contents999)';
+
+// Disable disabled CTA
+export const disabled = 'var(--rui-disabled)';
+export const disabledRoleRed = 'var(--rui-disabled-role-red)';
+export const disabledSecondary = 'var(--rui-disabled-secondary)';
+
+// Accent Error/ Link/
+export const roleRed = 'var(--rui-role-red)';
+export const roleYellow = 'var(--rui-role-yellow)';
+export const roleBlue = 'var(--rui-role-blue)';
+export const roleGreen = 'var(--rui-role-green)';
+
+// Background
+export const bg100 = 'var(--rui-bg100)';
+export const bg200 = 'var(--rui-bg200)';
+export const bg300 = 'var(--rui-bg300)';
+export const bgModal100 = 'var(--rui-bg-modal100)';
+export const bgModal200 = 'var(--rui-bg-modal200)';
+export const bgRoleRed = 'var(--rui-bg-role-red)';
+export const bgSecondary100 = 'var(--rui-bg-secondary100)';
+export const bgHighlight = 'var(--rui-bg-highlight)';
+export const bgRoleYellow = 'var(--rui-bg-role-yellow)';
+export const bgRoleBlue = 'var(--rui-bg-role-blue)';
+export const bgRoleGreen = 'var(--rui-bg-role-green)';
+
+// Divider
+export const divider = 'var(--rui-divider)';
+
+// Fixed
+export const fixedWhite = 'var(--rui-fixed-white)';
+export const fixedBgWhite = 'var(--rui-fixed-bg-white)';
+export const fixedBlack = 'var(--rui-fixed-black)';

package/src/index.ts

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

package/src/mediaQuery/const.ts

@@ -0,0 +1,2 @@
+export const DESKTOP_WIDTH = 768;
+export const PHONE_WIDTH = 430;

package/src/mediaQuery/index.ts

@@ -0,0 +1,50 @@
+'use client';
+
+import { css } from 'styled-components';
+import type { CSSProp } from 'styled-components';
+
+import { DESKTOP_WIDTH, PHONE_WIDTH } from './const';
+
+export * from './const';
+
+export function getDeviceWidthMediaQuery({
+  maxWidth,
+  minWidth,
+}: {
+  maxWidth?: number | string;
+  minWidth?: number | string;
+}) {
+  const mediaQueries: string[] = [];
+
+  if (maxWidth) {
+    mediaQueries.push(
+      `(max-width: ${
+        typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`
+      })`
+    );
+  }
+
+  if (minWidth) {
+    mediaQueries.push(
+      `(min-width: ${
+        typeof minWidth === 'string' ? minWidth : `${minWidth}px`
+      })`
+    );
+  }
+
+  return (cssInterpolation: CSSProp) => css`
+    @media ${mediaQueries.join(' and ')} {
+      ${cssInterpolation}
+    }
+  `;
+}
+
+export const mobileOnly = getDeviceWidthMediaQuery({
+  maxWidth: DESKTOP_WIDTH - 1,
+});
+export const desktopOnly = getDeviceWidthMediaQuery({
+  minWidth: DESKTOP_WIDTH,
+});
+export const phoneOnly = getDeviceWidthMediaQuery({
+  maxWidth: PHONE_WIDTH,
+});

package/src/typography/const.ts

@@ -0,0 +1,109 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+const LEGACY_TYPOGRAPHY_STYLES = {
+  Headline2_B: {
+    fontSize: 24,
+    lineHeight: 34,
+    fontWeight: 600,
+  },
+  Headline3_B: {
+    fontSize: 20,
+    lineHeight: 26,
+    fontWeight: 600,
+  },
+  Headline4_B: {
+    fontSize: 16,
+    lineHeight: 26,
+    fontWeight: 600,
+  },
+  Headline4_M: {
+    fontSize: 16,
+    lineHeight: 26,
+    fontWeight: 400,
+  },
+  Body1_B: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 600,
+  },
+  Body1_M: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 400,
+  },
+  Body2_B: {
+    fontSize: 12,
+    lineHeight: 19,
+    fontWeight: 600,
+  },
+  Body2_M: {
+    fontSize: 12,
+    lineHeight: 19,
+    fontWeight: 400,
+  },
+  Caption_B: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: 600,
+  },
+} as const;
+
+export const TYPOGRAPHY_STYLES = {
+  ...LEGACY_TYPOGRAPHY_STYLES,
+  Headline: {
+    fontSize: 24,
+    lineHeight: 34,
+    fontWeight: 600,
+  },
+  Title1: {
+    fontSize: 20,
+    lineHeight: 26,
+    fontWeight: 600,
+  },
+  Display: {
+    fontSize: 20,
+    lineHeight: 26,
+    fontWeight: 400,
+  },
+  Title2: {
+    fontSize: 16,
+    lineHeight: 26,
+    fontWeight: 600,
+  },
+  ArticleBody: {
+    fontSize: 16,
+    lineHeight: 26,
+    fontWeight: 400,
+  },
+  Subtitle1: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 600,
+  },
+  Body1: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: 400,
+  },
+  Subtitle2: {
+    fontSize: 12,
+    lineHeight: 19,
+    fontWeight: 600,
+  },
+  Body2: {
+    fontSize: 12,
+    lineHeight: 19,
+    fontWeight: 400,
+  },
+  Caption: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: 600,
+  },
+} as const;
+
+/**
+ * {@link https://github.com/orioncactus/pretendard#html-1}
+ */
+export const PRETENDARD_FONT_FAMILY =
+  "Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif";

package/src/typography/index.ts

@@ -0,0 +1,66 @@
+'use client';
+
+import { css } from 'styled-components';
+
+import { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';
+import type { TypographyStyle } from './types';
+
+export * from './const';
+export * from './types';
+
+/**
+ * 해당 스타일명에 해당하는 css 조각을 반환
+ * @see TYPOGRAPHY_STYLES
+ */
+export const getTypographyStyles = (typographyStyle: TypographyStyle) => {
+  const { fontSize, lineHeight, fontWeight } =
+    TYPOGRAPHY_STYLES[typographyStyle];
+  return css`
+    font-family: ${PRETENDARD_FONT_FAMILY};
+    font-size: ${fontSize}px;
+    line-height: ${lineHeight}px;
+    font-weight: ${fontWeight};
+  `;
+};
+
+/**
+ * 말줄임표 표시 (1줄)
+ *
+ * white-space: nowrap; \
+ * overflow: hidden; \
+ * text-overflow: ellipsis;
+ */
+export const textEllipsis = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+/**
+ * 말줄임표 표시
+ *
+ * line = 1 인 경우, \
+ * white-space: nowrap; \
+ * overflow: hidden; \
+ * text-overflow: ellipsis;
+ *
+ * line > 1 인 경우, \
+ * overflow: hidden; \
+ * text-overflow: ellipsis; \
+ * display: -webkit-box; \
+ * -webkit-box-orient: vertical; \
+ * -webkit-line-clamp: ${line};
+ */
+export const ellipsis = (line = 1) => {
+  if (line === 1) {
+    return textEllipsis;
+  }
+
+  return css`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: ${line};
+  `;
+};

package/src/typography/types.ts

@@ -0,0 +1,3 @@
+import type { TYPOGRAPHY_STYLES } from './const';
+
+export type TypographyStyle = keyof typeof TYPOGRAPHY_STYLES;

package/tsconfig.alias.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "./dist",
+    "declarationDir": "./dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src/**/*"]
+}

package/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "include": ["rollup.config.mjs", ".eslintrc.js", "./src/**/*"]
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "tsconfig/base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules", "rollup.config.mjs"]
+}