Refactor Dialog component and update related documentation

- Improved code formatting and consistency in Dialog component.
- Enhanced user experience by ensuring proper focus handling on dialog open.
- Updated dialog styles for better responsiveness and accessibility.
- Removed unused Dropdown and File components to streamline the codebase.
- Added TypeScript definitions for svelte-highlight and codesandbox.
- Updated tsconfig.json to improve type checking and module resolution.
- Modified package.json to include type definitions and exports.
- Removed obsolete publish-doc.ps1 script.
- Enhanced utility functions with JSDoc comments for better documentation.

Author: abbychau

.npmignore

@@ -0,0 +1,60 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+dist-ssr/
+*.local
+
+# Development files
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Documentation
+docs/
+*.md
+!README.md
+
+# Config files
+.gitignore
+.npmignore
+.gitattributes
+.eslintrc*
+.prettierrc*
+
+# Test files
+test/
+*.test.*
+*.spec.*
+
+# Example files
+examples/
+example/
+
+# CI/CD
+.github/
+.gitlab-ci.yml
+.travis.yml
+circle.yml
+appveyor.yml
+
+# Misc
+.editorconfig
+.cache/
+coverage/
+.nyc_output/

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["svelte.svelte-vscode"]
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
 }

docs/package-lock.json

@@ -11,11 +11,9 @@
 </style>
 {#if showCopy}
   <div class="copy">
-    <button class="button is-small is-white" on:click={() => {
-      navigator.clipboard.write(
-        [new ClipboardItem({ ["text/plain"]: new Blob([code], { type: "text/plain" }) })]
-      )
-    }}>
+   <button class="button is-small is-white" on:click={() => {
+       navigator.clipboard.writeText(code)
+     }}>
       <span class="icon">
         <i class="fa fa-clipboard"></i> 
       </span>

docs/src/components/Code.svelte

@@ -1,23 +1,11 @@
 <script>
-  import { onMount } from 'svelte'
   import { Button } from 'svelma'
   import Code from './Code.svelte'
   import CodepenButton from './CodepenButton.svelte'
 
   export let lang = 'xml'
   export let code
   export let horizontal = false
-
-  let showCode = false
-
-  function show() {
-    showCode = true
-  }
-
-  function hide(e) {
-    e.stopPropagation()
-    showCode = false
-  }
 </script>
 
 <style lang="scss">
@@ -57,51 +45,6 @@
     border-left: 1px solid #f5f5f5;
     overflow: hidden;
     position: relative;
-    /* cursor: pointer;
-    pointer-events: auto; */
-
-    /*
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      opacity: 0.8;
-      background-color: white;
-      content: '<> Show Code';
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 1;
-      font-size: 0.75rem;
-    }*/
-
-    /*
-    &:hover::before {
-      background-color: #ffdd57;
-    }
-
-    & :global(pre),
-    & :global(pre code) {
-      overflow: hidden;
-    }
-
-    &.show-code {
-      cursor: auto;
-
-      &::before {
-        content: inherit;
-      }
-
-      & :global(figure) {
-        margin-bottom: 3em;
-      }
-
-      & :global(pre) {
-        overflow: auto;
-      }
-    }*/
   }
 
   .snippet::before {
@@ -144,31 +87,9 @@
     line-height: 17px;
   }
 
-  /*.code {
-    :global(.codeview) {
-      height: 100%;
-
-      :global(figure) {
-        height: 100%;
-
-        :global(pre:not(.hidden)) {
-          height: 100%;
-        }
-      }
-    }
-  }*/
-
   :global(.codeview) {
     margin-bottom: 0 !important;
   }
-
-  :global(.btn-show-code) {
-    align-self: center;
-    margin: 2em 0 0.5em;
-    position: absolute;
-    bottom: 0;
-    background: none;
-  }
 </style>
 
 <div class="snippet" class:horizontal>
@@ -182,13 +103,6 @@
     <slot name="preview" />
   </div>
   <div class="code">
-    <!-- class:show-code={showCode} on:click={show} -->
     <Code {lang} {code} />
-
-    <!-- {#if showCode}
-      <Button class="btn-show-code is-rounded is-outline has-text-grey-light" on:click|stopPropagation={hide}>
-        Hide Code
-      </Button>
-    {/if} -->
   </div>
 </div>