refactor(mirinae): rename PTextEditor to PCodeEditor

- Renamed all instances of `PTextEditor` to `PCodeEditor`.
- Updated import paths and component references accordingly.
- Adjusted related storybook files and templates.

Signed-off-by: sulmo <[email protected]>

packages/mirinae/src/components.ts

@@ -76,7 +76,7 @@ export { default as PSearch } from './controls/search/search/PSearch.vue';
 export { default as PSelectButton } from './controls/select-button/PSelectButton.vue';
 export { default as PSelectCard } from './controls/select-card/PSelectCard.vue';
 export { default as PSelectStatus } from './controls/select-status/PSelectStatus.vue';
-export { default as PTextEditor } from './controls/text-editor/PTextEditor.vue';
+export { default as PCodeEditor } from './controls/code-editor/PCodeEditor.vue';
 export { default as PTextarea } from './controls/textarea/PTextarea.vue';
 export { default as PSlider } from './controls/slider/PSlider.vue';
 export { default as PToolbox } from './controls/toolbox/PToolbox.vue';

packages/mirinae/src/controls/code-editor/PCodeEditor.mdx

@@ -0,0 +1,58 @@
+{/* PCodeEditor.mdx */}
+
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as PCodeEditorStories from './PCodeEditor.stories';
+
+<Meta of={PCodeEditorStories} />
+
+
+# Code Editor
+<br/>
+<br/>
+
+
+## Basic
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.Basic} />
+
+<br/>
+<br/>
+
+## Loading
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.Loading} />
+
+<br/>
+<br/>
+
+## Highlight Lines
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.HighlightLines} />
+
+<br/>
+<br/>
+
+## Change Code
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.ChangeCode} />
+
+<br/>
+<br/>
+
+## Auto Reformat on Code Change (string only)
+<br/>
+<br/>
+<Canvas of={PCodeEditorStories.AutoReformatonCodeChangeStringOnly} />
+
+<br/>
+<br/>
+
+
+## Playground
+<Canvas of={PCodeEditorStories.Playground} />
+<Controls of={PCodeEditorStories.Playground} />

packages/mirinae/src/controls/text-editor/PTextEditor.stories.ts → packages/mirinae/src/controls/code-editor/PCodeEditor.stories.ts

@@ -4,40 +4,41 @@ import type { Meta, StoryObj } from '@storybook/vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
-import { getJsonObject } from '@/controls/text-editor/mock';
+import { getJsonObject } from '@/controls/code-editor/mock';
 import {
-    getTextEditorArgs, getTextEditorParameters, getTextEditorArgTypes, sampleCode,
-} from '@/controls/text-editor/story-helper';
+    getCodeEditorArgs, getCodeEditorParameters, getCodeEditorArgTypes, sampleCode,
+} from '@/controls/code-editor/story-helper';
 
-import PTextEditor from './PTextEditor.vue';
+import PCodeEditor from './PCodeEditor.vue';
 
-type PTextEditorPropsAndCustomArgs = ComponentProps<typeof PTextEditor>;
 
-const meta : Meta<PTextEditorPropsAndCustomArgs> = {
-    title: 'Controls/Text Editor',
-    component: PTextEditor,
+type PCodeEditorPropsAndCustomArgs = ComponentProps<typeof PCodeEditor>;
+
+const meta : Meta<PCodeEditorPropsAndCustomArgs> = {
+    title: 'Controls/Code Editor',
+    component: PCodeEditor,
     argTypes: {
-        ...getTextEditorArgTypes(),
+        ...getCodeEditorArgTypes(),
     },
     parameters: {
-        ...getTextEditorParameters(),
+        ...getCodeEditorParameters(),
     },
     args: {
-        ...getTextEditorArgs(),
+        ...getCodeEditorArgs(),
     },
 };
 
 export default meta;
-type Story = StoryObj<typeof PTextEditor>;
+type Story = StoryObj<typeof PCodeEditor>;
 
 
 const Template: Story = {
     render: (args, { argTypes }) => ({
         props: Object.keys(argTypes),
-        components: { PTextEditor },
+        components: { PCodeEditor },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="code"
+                <p-code-editor :code="code"
                     :folded="folded"
                     :read-only="readOnly" :loading="loading"
                     :highlight-lines="highlightLines"
@@ -50,10 +51,10 @@ const Template: Story = {
 
 export const Basic: Story = {
     render: () => ({
-        components: { PTextEditor },
+        components: { PCodeEditor },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="sampleCode" folded />
+                <p-code-editor :code="sampleCode" folded />
             </div>
         `,
         setup() {
@@ -69,10 +70,10 @@ export const Basic: Story = {
 
 export const Loading: Story = {
     render: () => ({
-        components: { PTextEditor, PButton },
+        components: { PCodeEditor, PButton },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :loading="loading" :code="sampleCode" folded />
+                <p-code-editor :loading="loading" :code="sampleCode" folded />
                 <p-button class="mt-4" @click="changeCode">Load Code!</p-button>
             </div>
         `,
@@ -100,10 +101,10 @@ export const Loading: Story = {
 
 export const HighlightLines: Story = {
     render: () => ({
-        components: { PTextEditor },
+        components: { PCodeEditor },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="sampleCode" folded :highlight-lines="[2,3,4]" />
+                <p-code-editor :code="sampleCode" folded :highlight-lines="[2,3,4]" />
             </div>
         `,
         setup() {
@@ -119,10 +120,10 @@ export const HighlightLines: Story = {
 
 export const ChangeCode: Story = {
     render: () => ({
-        components: { PTextEditor },
+        components: { PCodeEditor },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="sampleCode" folded />
+                <p-code-editor :code="sampleCode" folded />
                 <button @click="handleChangeCode">Change Code!</button>
             </div>
         `,
@@ -143,10 +144,10 @@ export const ChangeCode: Story = {
 
 export const AutoReformatonCodeChangeStringOnly: Story = {
     render: () => ({
-        components: { PTextEditor, PButton },
+        components: { PCodeEditor, PButton },
         template: `
             <div class="h-full w-full overflow p-8">
-                <p-text-editor :code="sampleCode" folded :disable-auto-reformat="disableAutoReformat" class="mb-4" />
+                <p-code-editor :code="sampleCode" folded :disable-auto-reformat="disableAutoReformat" class="mb-4" />
                 <p-button @click="handleChangeCode(false)">Change Code & Reformat (default)</p-button>
                 <p-button style-type="highlight" @click="handleChangeCode(true)">Change Code & Do not Reformat Automatically</p-button>
             <p class="text-red-600 font-bold mt-4">This feature works only when the code prop's type is string</p>

packages/mirinae/src/controls/text-editor/PTextEditor.vue → packages/mirinae/src/controls/code-editor/PCodeEditor.vue

@@ -5,7 +5,7 @@
 * */
 
 /**
- * PTextEditor can get any types,
+ * PCodeEditor can get any types,
  * CodeMirror can get String ONLY
  */
 import {
@@ -183,7 +183,7 @@ const textareaRef = toRef(state, 'textareaRef');
 </script>
 
 <template>
-    <div class="p-text-editor">
+    <div class="p-code-editor">
         <p-data-loader :data="true"
                        :loading="props.loading"
                        disable-empty-case
@@ -203,7 +203,7 @@ const textareaRef = toRef(state, 'textareaRef');
 @import 'codemirror/theme/dracula.css';
 @import 'codemirror/addon/lint/lint.css';
 @import 'codemirror/addon/fold/foldgutter.css';
-.p-text-editor {
+.p-code-editor {
     height: 100%;
     min-height: 5rem;
     > .p-data-loader {

packages/mirinae/src/controls/text-editor/story-helper.ts → packages/mirinae/src/controls/code-editor/story-helper.ts

@@ -24,14 +24,14 @@ const sampleCodeObj = {
 };
 export const sampleCode = JSON.stringify(sampleCodeObj, null, ' ');
 
-export const getTextEditorParameters = (): Parameters => ({
+export const getCodeEditorParameters = (): Parameters => ({
     design: {
         type: 'figma',
         url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=6169%3A182308',
     },
 });
 
-export const getTextEditorArgs = (): Args => ({
+export const getCodeEditorArgs = (): Args => ({
     code: sampleCode,
     options: {
         tabSize: 4,
@@ -55,7 +55,7 @@ export const getTextEditorArgs = (): Args => ({
     loader: null,
 });
 
-export const getTextEditorArgTypes = (): ArgTypes => ({
+export const getCodeEditorArgTypes = (): ArgTypes => ({
     code: {
         name: 'code',
         description: 'Code',
@@ -88,7 +88,7 @@ export const getTextEditorArgTypes = (): ArgTypes => ({
     readOnly: {
         name: 'readOnly',
         type: { name: 'boolean' },
-        description: 'Whether Mode of text editor is ReadOnly',
+        description: 'Whether Mode of code editor is ReadOnly',
         defaultValue: false,
         table: {
             type: {

packages/mirinae/src/controls/context-menu/PContextMenu.stories.ts

@@ -5,9 +5,9 @@ import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
 import PToggleButton from '@/controls/buttons/toggle-button/PToggleButton.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import { menuItems, longMenuItems, getContextMenuItems } from '@/controls/context-menu/mock';
 import { getContextMenuArgTypes, getContextMenuArgs, getContextMenuParameters } from '@/controls/context-menu/story-helper';
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
 import PEmpty from '@/data-display/empty/PEmpty.vue';
 import PI from '@/foundation/icons/PI.vue';
 import { getTextHighlightRegex } from '@/utils/helpers';
@@ -188,7 +188,7 @@ export const HeaderSlot: Story = {
 export const NoDataSlot: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PEmpty, PTextEditor },
+        components: { PContextMenu, PEmpty, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -209,7 +209,7 @@ export const NoDataSlot: Story = {
 export const MenuSlot: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PTextEditor },
+        components: { PContextMenu, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -233,7 +233,7 @@ export const MenuSlot: Story = {
                             <pre ref="slotPropsRef">{{slotProps}}</pre>
                         </template>
                     </p-context-menu>
-                    <p-text-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
+                    <p-code-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
                 </div>
             </div>
         <!--<div>-->
@@ -257,7 +257,7 @@ export const MenuSlot: Story = {
 export const ItemSlots: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PI, PTextEditor },
+        components: { PContextMenu, PI, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -278,7 +278,7 @@ export const ItemSlots: Story = {
                             <pre ref="slotPropsRef">{{slotProps}}</pre>
                         </template>
                     </p-context-menu>
-                    <p-text-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
+                    <p-code-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
                 </div>
             </div>
         <!--<div>-->
@@ -302,7 +302,7 @@ export const ItemSlots: Story = {
 export const HeaderSlots: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PI, PTextEditor },
+        components: { PContextMenu, PI, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -323,7 +323,7 @@ export const HeaderSlots: Story = {
                             <pre ref="slotPropsRef">{{slotProps}}</pre>
                         </template>
                     </p-context-menu>
-                    <p-text-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
+                    <p-code-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
                 </div>
             </div>
             <!--<div>-->
@@ -367,7 +367,7 @@ export const BottomSlot: Story = {
 export const SearchSlots: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PEmpty, PTextEditor },
+        components: { PContextMenu, PEmpty, PCodeEditor },
         template: `
             <div class="flex h-full flex-col">
                 <div class="mt-4">
@@ -420,7 +420,7 @@ export const ItemsHeightFixed: Story = {
 export const HighlightTermAndItemTextListSlot: Story = {
     render: () => ({
         props: Object.keys(getContextMenuArgTypes()),
-        components: { PContextMenu, PTextEditor },
+        components: { PContextMenu, PCodeEditor },
         template: `
             <div>
                 <p class="text-lg my-4">highlight term: 'o'</p>
@@ -432,7 +432,7 @@ export const HighlightTermAndItemTextListSlot: Story = {
                     </template>
                 </p-context-menu>
                 <p class="text-lg my-4">The last item's <strong>Slot Props</strong> for <strong>item-text-list</strong> slot with highlight term: 'o'</p>
-                <p-text-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
+                <p-code-editor v-if="slotPropsText" read-only :code="slotPropsText" folded style="font-size: 12px;" />
                 <p-context-menu v-show="false" :menu="menu" highlight-term="o">
                     <template #item-text-list="slotProps">
                         <pre ref="slotPropsRef">{{slotProps}}</pre>

packages/mirinae/src/controls/dropdown/select-dropdown/PSelectDropdown.stories.ts

@@ -5,6 +5,7 @@ import type { ComponentProps } from 'vue-component-type-helpers';
 
 import PButton from '@/controls/buttons/button/PButton.vue';
 import PToggleButton from '@/controls/buttons/toggle-button/PToggleButton.vue';
+import PCodeEditor from '@/controls/code-editor/PCodeEditor.vue';
 import { menuItems } from '@/controls/context-menu/mock';
 import {
     getSelectDropdownMenu,
@@ -16,7 +17,6 @@ import {
     getSelectDropdownParameters,
 } from '@/controls/dropdown/select-dropdown/story-helper';
 import { SELECT_DROPDOWN_STYLE_TYPE } from '@/controls/dropdown/select-dropdown/type';
-import PTextEditor from '@/controls/text-editor/PTextEditor.vue';
 import { useProxyValue } from '@/hooks/use-proxy-state/use-proxy-state';
 
 import PSelectDropdown from './PSelectDropdown.vue';
@@ -649,7 +649,7 @@ export const IsFilterable: Story = {
 export const ShowRelatedHeadertotheSelectedZone: Story = {
     render: () => ({
         props: Object.keys(getSelectDropdownArgTypes()),
-        components: { PSelectDropdown, PButton, PTextEditor },
+        components: { PSelectDropdown, PButton, PCodeEditor },
         template: `
             <div>
                 <p class="text-label-lg font-bold my-3">show headers</p>
@@ -659,7 +659,7 @@ export const ShowRelatedHeadertotheSelectedZone: Story = {
                 <p-select-dropdown :menu="menu" multi-selectable is-filterable hide-header-without-items />
                 <br/>
                 <br/>
-                <p-text-editor :code="JSON.stringify(menu, null, 2)"
+                <p-code-editor :code="JSON.stringify(menu, null, 2)"
                             mode="readOnly"
                             style="height: 200px; max-height: 400px;"
                 />