Merge pull request #112 from openinfradev/feature-scss

Feature. Refactor SCSS to use @use for design tokens and clean imports

Author: Siyeop

.gitignore

@@ -17,6 +17,7 @@ dist-ssr
 *.local
 storybook-static
 coverage
+lib
 
 
 # Editor directories and files

.storybook/main.ts

@@ -5,16 +5,6 @@ const resolve = (dir) => path.join(__dirname, '.', dir);
 
 module.exports = {
     stories: ['../stories/components/**/*.stories.tsx'],
-    addons: [
-        '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', {
-            name: '@storybook/preset-scss',
-            options: {
-                sassLoaderOptions: {
-                    additionalData: '@import "/src/styles/designToken/Entry.scss";',
-                },
-            },
-        }
-    ],
     framework: {
         name: '@storybook/react-vite',
         options: {},
@@ -26,17 +16,22 @@ module.exports = {
             resolve: {
                 alias: {
                     '@': path.resolve('src'),
+                    'src': path.resolve('src'),
                     '~': path.resolve('src/components'),
                     '~style': path.resolve('src/styles'),
                 },
             },
             css: {
                 preprocessorOptions: {
                     scss: {
-                        additionalData: '@import "/src/styles/designToken/Entry.scss";',
-                    },
-                },
-            },
+                        api: 'modern',
+                        includePaths: [
+                            path.resolve(__dirname, '../node_modules'),
+                            path.resolve(__dirname, '../')
+                        ]
+                    }
+                }
+            }
         });
     },
     docs: {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tksui-components",
-    "version": "0.8.28",
+    "version": "0.8.31",
     "private": false,
     "type": "module",
     "module": "lib/esm/index.js",
@@ -10,12 +10,14 @@
     ],
     "scripts": {
         "clean": "rimraf lib",
-        "css-build": "sass --no-source-map src/styles/Entry.scss:lib/styles/index.css src/styles/designToken/ThemeToken.module.scss:lib/styles/ThemeToken.module.css",
+        "css-build": "sass --no-source-map --load-path=. src/styles/Entry.scss:lib/styles/index.css src/styles/designToken/ThemeToken.module.scss:lib/styles/ThemeToken.module.css",
         "css-minify": "esbuild lib/styles/index.css --minify --allow-overwrite --outfile=lib/styles/index.css && esbuild lib/styles/ThemeToken.module.css --minify --allow-overwrite --outfile=lib/styles/ThemeToken.module.css",
         "js-build": "tsc --project tsconfig.esm.json && tsc-alias -p tsconfig.esm.json",
         "js-content-replace": "node build-content-replacer.js",
         "js-minify": "esbuild lib/esm/**/*.js --minify --allow-overwrite --outdir=lib/esm",
         "build-all": "npm run clean && npm run css-build && npm run css-minify && npm run js-build && npm run js-content-replace && npm run js-minify",
+        "yalc-publish": "npm run build-all && npx yalc publish",
+        "yalc-push": "npm run build-all && npx yalc push",
         "patch": "npm run build-all && npm version patch && npm publish && npm run clean",
         "minor": "npm run build-all && npm version minor && npm publish && npm run clean",
         "major": "npm run build-all && npm version major && npm publish && npm run clean",
@@ -74,7 +76,8 @@
         "typescript": "^5.0.2",
         "typescript-plugin-css-modules": "^5.0.2",
         "vite": "^5.3.3",
-        "vite-plugin-compression2": "^0.10.4"
+        "vite-plugin-compression2": "^0.10.4",
+        "yalc": "^1.0.0-pre.53"
     },
     "dependencies": {
         "@material-symbols/font-300": "^0.14.5",

src/common/hook/UseClickOutside.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import {MutableRefObject, useEffect} from 'react';
 
 

src/common/hook/UseInputState.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import {useState} from 'react';
 
 

src/common/hook/UsePagination.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import {useCallback, useState} from 'react';
 import {TPageRequestVO, TPageResponseVO} from '~/data-container/data-grid';
 

src/common/hook/UseRefs.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import {MutableRefObject, useRef} from 'react';
 
 

src/common/hook/UseRipple.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import {CSSProperties, KeyboardEvent, MouseEvent, MutableRefObject, useRef} from 'react';
 import colorUtil from '../util/ColorUtil';
 import lodashUtil from '@/common/util/lodashUtil';

src/common/hook/UseValidator.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import {useState} from 'react';
 import {TRadioGroupValue} from '../../components/input/radio-group/TRadioGroup.interface';
 import {TCheckboxGroupValue} from '../../components/input/checkbox-group/TCheckboxGroup.interface';

src/components/data-container/data-grid/TDataGrid.tsx

@@ -16,11 +16,9 @@ const TDataGrid = forwardRef(({
     defaultColDef = {
         sortable: false,
         resizable: true,
-        showDisabledCheckboxes: true,
     },
     animateRows = true,
     popupParent = document.body,
-    suppressRowClickSelection = true,
     enableCellTextSelection = true,
     headerHeight = DEFAULT_HEADER_HEIGHT,
     rowHeight = DEFAULT_ROW_HEIGHT,
@@ -36,7 +34,6 @@ const TDataGrid = forwardRef(({
         defaultColDef,
         animateRows,
         popupParent,
-        suppressRowClickSelection,
         enableCellTextSelection,
         headerHeight,
         rowHeight,