@croquiscom/pds 7.5.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croquiscom/pds",
-  "version": "7.5.0",
+  "version": "8.1.0",
   "description": "Design system for Zigzag's Partner Center",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",

package/scripts/jscodeshift-utils.ts

@@ -0,0 +1,31 @@
+import core, { Collection } from 'jscodeshift';
+
+export function getImportDeclaration(j: core.JSCodeshift, source: Collection<any>, sourcePath: string) {
+  return source.find(j.ImportDeclaration).filter((path) => path.node.source.value === sourcePath);
+}
+
+export function hasImportDeclaration(j: core.JSCodeshift, source: Collection<any>, sourcePath: string) {
+  return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === sourcePath).length;
+}
+
+export function getImportSpecifier(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  specifier: string,
+  sourcePath: string,
+) {
+  return source
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === sourcePath)
+    .find(j.ImportSpecifier)
+    .filter((path) => path.value.imported.name === specifier);
+}
+
+export function hasImportSpecifier(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  specifier: string,
+  sourcePath: string,
+) {
+  return !!getImportSpecifier(j, source, specifier, sourcePath)?.length;
+}

package/scripts/table/migrate-table.ts

@@ -0,0 +1,107 @@
+/**
+ * 사용처 사용법
+ * step 1
+ * npx jscodeshift -t ./node_modules/@croquiscom/pds/scripts/table/migrate-table.ts --extensions=ts,tsx --parser=tsx --ignore-pattern="./node_modules/**" './' --verbose=3
+ *
+ * step 2
+ * step 1 완료 후 prettier를 한 번 실행 해주셔야 합니다.
+ * npm run prettier
+ * or
+ * prettier --write .
+ */
+import { getImportDeclaration, hasImportDeclaration, hasImportSpecifier } from '../jscodeshift-utils';
+import { API, FileInfo } from 'jscodeshift';
+
+const migrations = {
+  Table: 'DataTable',
+  TableProps: 'DataTableProps',
+  TableColumnBase: 'DataTableColumnBase',
+  TableColumnType: 'DataTableColumnType',
+  TableColumnsType: 'DataTableColumnsType',
+  TableColumnGroupType: 'DataTableColumnGroupType',
+  TableRowType: 'DataTableRowType',
+  TableRowsType: 'DataTableRowsType',
+  TableState: 'DataTableState',
+  TableAction: 'DataTableAction',
+};
+
+const original_name_list = Object.keys(migrations);
+const migration_entries = Object.entries(migrations);
+
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const source = j(file.source);
+
+  let is_used_comp = false;
+  let is_used_props = false;
+
+  if (!hasImportDeclaration(j, source, '@croquiscom/pds')) {
+    return;
+  }
+
+  getImportDeclaration(j, source, '@croquiscom/pds')
+    .find(j.ImportSpecifier)
+    .filter((path) => original_name_list.includes(path.node.imported.name))
+    .forEach((path) => {
+      const new_name = migrations[path.node.imported.name];
+      if (!new_name) return;
+
+      if (new_name === 'DataTable') {
+        if (source.find(j.Identifier, { name: 'DataTable' }).length) {
+          j(path).replaceWith(j.importSpecifier(j.identifier(new_name), j.identifier('PdsDataTable')));
+          is_used_comp = true;
+          return;
+        }
+      }
+      if (new_name === 'DataTableProps') {
+        if (source.find(j.Identifier, { name: 'DataTableProps' }).length) {
+          j(path).replaceWith(j.importSpecifier(j.identifier(new_name), j.identifier('PdsDataTableProps')));
+          is_used_props = true;
+          return;
+        }
+      }
+
+      j(path).replaceWith(j.importSpecifier(j.identifier(new_name)));
+    });
+
+  migration_entries
+    .filter(([_origin, new_name]) => hasImportSpecifier(j, source, new_name, '@croquiscom/pds'))
+    .forEach(([original_name, new_name]) => {
+      if (new_name === 'DataTable') {
+        source.find(j.JSXIdentifier, { name: original_name }).forEach((path) => {
+          j(path).replaceWith(j.jsxIdentifier(is_used_comp ? 'PdsDataTable' : new_name));
+        });
+        return;
+      }
+
+      source.find(j.Identifier, { name: original_name }).forEach((path) => {
+        if (new_name === 'DataTableProps' && is_used_props) {
+          j(path).replaceWith('PdsDataTableProps');
+        } else {
+          j(path).replaceWith(new_name);
+        }
+      });
+
+      source
+        .find(j.CallExpression, { typeParameters: { type: 'TSTypeParameterInstantiation' } } as any)
+        .forEach((path) => {
+          const index = (path.node as any).typeParameters.params.findIndex((param) => {
+            return j(param).find(j.Identifier, { name: original_name }).length;
+          });
+
+          if (index === -1) return;
+
+          j((path.node as any).typeParameters.params[index])
+            .find(j.Identifier, { name: original_name })
+            .forEach((path) => {
+              if (new_name === 'DataTableProps' && is_used_props) {
+                j(path).replaceWith('PdsDataTableProps');
+              } else {
+                j(path).replaceWith(j.identifier(new_name));
+              }
+            });
+        });
+    });
+
+  return source.toSource({ quote: 'single' });
+}

package/dist/components/table/TableHeader.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { SelectRowsAction, TableRowsType } from './types';
-import { TableProps } from './Table';
-export interface TableHeaderProps<DataType> extends Pick<TableProps<DataType>, 'columns' | 'rows' | 'stickyHeader' | 'sortBy' | 'sortDirection' | 'onSortBy' | 'selectableRows' | 'hideSelectAll' | 'resize'> {
-    allSelected?: boolean;
-    selectedRows?: TableRowsType<DataType>;
-    onSelectedRows?: (action: SelectRowsAction<DataType>) => void;
-}
-export declare const TableHeader: <DataType extends object = any>({ columns, rows, stickyHeader, sortBy, sortDirection, allSelected, selectedRows, selectableRows, hideSelectAll, resize, onSelectedRows, onSortBy, }: TableHeaderProps<DataType>) => JSX.Element;

package/dist/components/table/TableRows.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { TableProps } from './Table';
-import { TableRowsType, SelectRowAction } from './types';
-interface TableRowsProps<DataType> extends Pick<TableProps<DataType>, 'columns' | 'rows' | 'noDataText' | 'loading' | 'selectableRows' | 'clickableRows' | 'cellHoverStyle' | 'resize'> {
-    tableContainerAttribute: number;
-    allSelected?: boolean;
-    selectedRows?: TableRowsType<DataType>;
-    onSelectedRow?: (action: SelectRowAction<DataType>) => void;
-}
-export declare const TableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, clickableRows, selectedRows, noDataText, cellHoverStyle, tableContainerAttribute, resize, onSelectedRow, }: TableRowsProps<DataType>) => JSX.Element;
-export {};

package/scripts/icons/migrate-icons.ts

@@ -1,54 +0,0 @@
-import { API, FileInfo } from 'jscodeshift';
-import { icon_list } from './migration-icon-list';
-
-const icon_map = new Map();
-
-icon_list.forEach((icon) => {
-  icon_map.set(
-    icon[0].map((name) => `Icon${name}`),
-    icon[1],
-  );
-});
-
-const icon_keys = [...icon_map.keys()];
-
-export default function transformer(file: FileInfo, api: API) {
-  const j = api.jscodeshift;
-  const source = j(file.source);
-
-  icon_keys.forEach((keys) => {
-    keys.forEach((key) => {
-      source.find(j.Identifier).forEach((path) => {
-        const target_key = icon_keys.find((keys) => keys.includes(path.node.name));
-        if (!icon_map.has(target_key)) {
-          return;
-        }
-
-        const new_icon = icon_map.get(target_key);
-
-        if (!j(path).isOfType(j.JSXIdentifier)) {
-          j(path).replaceWith(j.identifier(`Icon${new_icon}`));
-          return;
-        }
-
-        if (j.JSXOpeningElement.check(path.parent.node) && path.parent.node.name.name === key) {
-          const parentPath = j(path.parent);
-          const has_size_prop = parentPath.find(j.JSXAttribute, { name: { name: 'size' } }).length;
-          const size = key.match(/(\d+)(?!.*\d)/)[0];
-          const size_no = Number(size);
-          const size_prop = j.jsxAttribute(
-            j.jsxIdentifier('size'),
-            j.jsxExpressionContainer(j.numericLiteral(size_no)),
-          );
-
-          path.parent.value.name = j.jsxIdentifier(`Icon${new_icon}`);
-          if (!has_size_prop && size_no !== 16) {
-            path.parent.value.attributes.push(size_prop);
-          }
-        }
-      });
-    });
-  });
-
-  return source.toSource({ quote: 'single' });
-}

package/scripts/icons/migration-icon-list.ts

@@ -1,162 +0,0 @@
-export const icon_list = [
-  [['ArrowTop16', 'ArrowTop18'], 'ArrowChevronUp'],
-  [['ArrowBottom16', 'ArrowBottom18'], 'ArrowChevronDown'],
-  [['ArrowLeft16', 'ArrowLeft18'], 'ArrowChevronLeft'],
-  [['ArrowRight16', 'ArrowRight18'], 'ArrowChevronRight'],
-  [['ArrowTriangleUp16'], 'ArrowTriangleUp'],
-  [['ArrowTriangleDown16'], 'ArrowTriangleDown'],
-  [['ArrowLineUp20'], 'ArrowDirectionUp'],
-  [['ArrowLineDown20'], 'ArrowDirectionDown'],
-  [['ArrowLineLeft20'], 'ArrowDirectionLeft'],
-  [['ArrowLineRight20'], 'ArrowDirectionRight'],
-  [['ArrowIncrease10'], 'ArrowIncrease'],
-  [['ArrowDecrease10'], 'ArrowDecrease'],
-  [['StatusNo16', 'CloseSmall16', 'CloseMedium24'], 'X'],
-  [['Check14', 'Check24'], 'Check'],
-  [['CircleCheckLine16', 'Done20'], 'CircleCheck'],
-  [['CircleCheckFill16'], 'CircleCheckFill'],
-  [['Alert16', 'Alert20', 'Warning24', 'EmptyNoti50', 'Alert50'], 'CircleWarning'],
-  [['AlertFill20'], 'CircleWarningFill'],
-  [['Info14', 'Info16', 'Info24'], 'CircleInfo'],
-  [['InfoFill20'], 'CircleInfoFill'],
-  [['Help14', 'Help16'], 'CircleQuestion'],
-  [['Order24'], 'Checklist'],
-  [['Refund24'], 'BoxX'],
-  [['Exchange24'], 'BoxReturn'],
-  [['Question24'], 'Message'],
-  [['Alert24'], 'TriangleWarning'],
-  [['Plus16', 'Plus20'], 'Plus'],
-  [['Minus20'], 'Minus'],
-  [['CirclePlus14', 'Charge20'], 'CirclePlus'],
-  [['CircleMinus14'], 'CircleMinus'],
-  [['AutoCharge20'], 'CircleAutoCharge'],
-  [['Won16', 'CircleWon18', 'CircleWon24', 'Account24'], 'CircleWon'],
-  [['OutlinkTwo14'], 'LinkExternal'],
-  [['Thumbup14'], 'ThumbsUp'],
-  [['IndentArrow14'], 'ArrowIndent'],
-  [['Copy14'], 'Copy'],
-  [['StatusYes16'], 'Circle'],
-  [['Refresh14'], 'Refresh'],
-  [['Search14'], 'Search'],
-  [['Doc14'], 'Document'],
-  [['Below10'], 'Below'],
-  [['Status10'], 'CircleFill'],
-  [['Move10'], 'Move'],
-  [['New10'], 'New'],
-  [['Star10'], 'Star'],
-  [['IdeaLine24'], 'Bulb'],
-  [['IdeaFill24'], 'BulbFill'],
-  [['CircleCard24'], 'CircleCreditCard'],
-  [['Subscription24'], 'Subscription'],
-  [['Picture24', 'Promotion24'], 'Picture'],
-  [['Megaphone14', 'Notice24'], 'Megaphone'],
-  [['Lock18'], 'Unlock'],
-  [['Locked16'], 'Lock'],
-  [['Email18'], 'Email'],
-  [['Vvip18'], 'Vvip'],
-  [['Link16'], 'Link'],
-  [['LinkCircle16'], 'CircleLinkFill'],
-  [['Edit16'], 'Edit'],
-  [['EyeOn16'], 'EyeOn'],
-  [['EyeOff16'], 'EyeOff'],
-  [['Error16'], 'Warning'],
-  [['Video16'], 'CirclePlayFill'],
-  [['Play20'], 'PlayFill'],
-  [['Pause20'], 'PauseFill'],
-  [['DeleteCircleFill20'], 'CircleXFill'],
-  [['LoadingDonuts30'], 'LoadingDonuts'],
-  [['LoadingDots30'], 'LoadingDots'],
-  [['Graph24'], 'BarChart'],
-  [['Powerup24'], 'Rocket'],
-  [['Cs24'], 'Counselor'],
-  [['Cart24'], 'Cart'],
-  [['Product24'], 'Hanger'],
-  [['Exhibition24'], 'Layout'],
-  [['Delivery24'], 'ZDelivery'],
-  [['ChargeCoupon20', 'Coupon24'], 'Coupon'],
-  [['Dashboard24'], 'HomeDashboard'],
-  [['Store24'], 'Store'],
-  [['Contract24'], 'Contract'],
-  [['MemoDefault20', 'Message24'], 'Comment'],
-  [['MemoAttention20'], 'CommentAlert'],
-  [['Video24'], 'Video'],
-  [['PartnerSupport24'], 'Handshake'],
-  [['Upload50'], 'Upload'],
-  [['DocConfirm50'], 'DocumentCheck'],
-  [['Spoid20'], 'Spoid'],
-  [['Camera20'], 'Camera'],
-  [['PenaltyGood20'], 'FaceSmileFill'],
-  [['PenaltyNotsobad20'], 'FaceNeutralFill'],
-  [['PenaltyBad20'], 'FaceBadFill'],
-  [['Ordering16'], 'Sort'],
-  [['TableMove16'], 'ThreeBars'],
-  [['Pin16'], 'Pin'],
-  [['Clock16'], 'Clock'],
-  [['Calendar16'], 'Calendar'],
-  [['Crop16'], 'Crop'],
-  [['DiscountTag16'], 'DiscountTagFill'],
-  [['Zoomin16'], 'ZoomIn'],
-  [['Best16'], 'BoxBestFill'],
-  [['Interest16'], 'BoxFingerOffFill'],
-  [['NotExposed16'], 'BoxEyeOffFill'],
-  [['SluggishSales16'], 'BoxGraphDownFill'],
-  [['SteadySeller16'], 'BoxCartFill'],
-  [['ZigzagWeb16'], 'ZigzagWeb'],
-  [['Excel16'], 'Excel'],
-  [['Instagram16'], 'CircleInstagram'],
-  [['YouTube16'], 'CircleYouTube'],
-  [['TikTok16'], 'CircleTikTok'],
-  [['Blog16'], 'CircleBlog'],
-  [['Zigzag16'], 'BoxZigzag'],
-  [['Fbk16'], 'BoxFbk'],
-  [['Posty16'], 'BoxPosty'],
-  [['Mystore16'], 'BoxMystore'],
-  [['ZigzagKor16'], 'BoxKorea'],
-  [['ZigzagJpn16'], 'BoxJapan'],
-  [['ZigzagEng16'], 'BoxUSA'],
-  [['ZigzagCan16'], 'BoxCanada'],
-  [['ZigzagGlobal16'], 'BoxGlobal'],
-  [['Home16'], 'BoxHome'],
-  [['NumOne18'], 'NumOneFill'],
-  [['NumTwo18'], 'NumTwoFill'],
-  [['NumThree18'], 'NumThreeFill'],
-  [['NumFour18'], 'NumFourFill'],
-  [['NumFive18'], 'NumFiveFill'],
-  [['NumSix18'], 'NumSixFill'],
-  [['NumSeven18'], 'NumSevenFill'],
-  [['NumEight18'], 'NumEightFill'],
-  [['NumNine18'], 'NumNineFill'],
-  [['NumTen18'], 'NumTenFill'],
-  [['Pin24'], 'PinColor'],
-  [['Brand72'], 'CategoryBrand'],
-  [['Shop72'], 'CategoryShop'],
-  [['Beauty72'], 'CategoryBeauty'],
-  [['Life72'], 'CategoryLife'],
-  [['Kids72'], 'CategoryKids'],
-  [['Delivery72'], 'CategoryZDelivery'],
-  [['GlobalDelivery72'], 'CategoryDeliveryGlobal'],
-  [['OrderAmount18'], 'ColoredMoneyBag'],
-  [['Orders18'], 'ColoredDocument'],
-  [['Cvr18'], 'ColoredMoneyFly'],
-  [['Heart18'], 'ColoredHeart'],
-  [['Bookmark18'], 'ColoredStar'],
-  [['Coupon18'], 'ColoredCoupon'],
-  [['Grade18'], 'ColoredMedal'],
-  [['Ranking18'], 'ColoredRanking'],
-  [['Trend18'], 'ColoredPulse'],
-  [['TrendIncreasing18'], 'ColoredGraphUp'],
-  [['TrendDecreasing18'], 'ColoredGraphDown'],
-  [['BarChart18'], 'ColoredBarChart'],
-  [['Click18'], 'ColoredEyes'],
-  [['Cart18'], 'ColoredShoppingBag'],
-  [['User18'], 'ColoredPerson'],
-  [['One18'], 'ColoredOneFinger'],
-  [['Two18'], 'ColoredTwoFingers'],
-  [['Tip18'], 'ColoredTip'],
-  [['AlertTriangle18'], 'ColoredWarning'],
-  [['Write18'], 'ColoredWrite'],
-  [['Excel18'], 'ColoredExcel'],
-  [['Confetti18'], 'ColoredConfetti'],
-  [['Check18'], 'ColoredCheck'],
-  [['Return18'], 'ColoredReturn'],
-] as const;