Merge pull request #212 from chenz24/diff-viewer

Rename DiffView to DiffViewer.

.changeset/fast-sloths-wait.md

@@ -0,0 +1,5 @@
+---
+'@kubed/diff-viewer': patch
+---
+
+rename DiffView to DiffViewer.

packages/components/src/Modal/Modal.story.tsx

@@ -30,6 +30,7 @@ export const Basic = () => {
         description="Modal description"
         titleIcon={<Cluster size={40} />}
         onCancel={closeModal}
+        footer={<div>footer</div>}
       >
         Modal content
       </Modal>

packages/components/src/Tag/Tag.story.tsx

@@ -50,8 +50,19 @@ export const Append = () => (
   </Tag>
 );
 
-export const Closable = () => (
-  <Tag radius="lg" closable className="filter-tag">
-    Add
-  </Tag>
-);
+export const Closable = () => {
+  const tags = ['apple', 'banana'];
+
+  return tags.map((tag) => (
+    <Tag
+      radius="lg"
+      closable
+      className="filter-tag"
+      onClose={() => {
+        console.log(tag);
+      }}
+    >
+      {tag}
+    </Tag>
+  ));
+};

packages/diff-view/package.json → packages/diff-viewer/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kubed/diff-view",
+  "name": "@kubed/diff-viewer",
   "version": "0.0.1",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -15,7 +15,7 @@
   "repository": {
     "url": "https://github.com/kubesphere/kube-design.git",
     "type": "git",
-    "directory": "packages/diff-view"
+    "directory": "packages/diff-viewer"
   },
   "peerDependencies": {
     "@kubed/hooks": "0.0.10",

packages/diff-view/src/DiffView.story.tsx → packages/diff-viewer/src/DiffViewer.story.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { Button } from '@kubed/components';
-import { DiffView } from './DiffView';
+import { DiffViewer } from './DiffViewer';
 
 export default {
-  title: 'Extension-Components/DiffView',
-  component: DiffView,
+  title: 'Extension-Components/DiffViewer',
+  component: DiffViewer,
 };
 
 export const basic = () => {
@@ -102,7 +102,7 @@ spec:
   return (
     <>
       <Button onClick={handleChange}>Change Value</Button>
-      <DiffView
+      <DiffViewer
         title="配置文件"
         description="与上一个记录 #7 (85f76fb8d7) 对比"
         oldValue={oldValue}

packages/diff-view/src/DiffView.tsx → packages/diff-viewer/src/DiffViewer.tsx

@@ -15,21 +15,21 @@ const getDiffHtml = (oldValue, newValue, options = {}) => {
   });
 };
 
-export interface DiffViewProps {
+export interface DiffViewerProps {
   title?: string | React.ReactNode;
   description?: string | React.ReactNode;
   mode?: 'line-by-line' | 'side-by-side';
   oldValue: string;
   newValue: string;
 }
 
-export const DiffView = ({
+export const DiffViewer = ({
   title,
   description,
   mode = 'line-by-line',
   oldValue,
   newValue,
-}: DiffViewProps) => {
+}: DiffViewerProps) => {
   const [_mode, setMode] = useState(mode);
   const [diffHtml, setDiffHtml] = useState(getDiffHtml(oldValue, newValue, { outputFormat: mode }));
 

packages/diff-viewer/src/index.ts

@@ -0,0 +1 @@
+export * from './DiffViewer';