Add string utils to top-level exports and add docs

.changeset/rotten-meals-sin.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Add string utils to top-level exports and add docs

packages/svelte-ux/src/lib/utils/index.ts

@@ -10,7 +10,7 @@ export { round, clamp } from './number';
 export * from './promise';
 export * from './sort';
 export { cls } from './styles';
-export { uniqueId } from './string';
+export * from './string';
 
 // aliased exports to remove conflicts (and make imports less noisy from top-level)
 export * as array from './array';
@@ -25,6 +25,5 @@ export * as object from './object';
 export * as rollup from './rollup';
 export * as routing from './routing';
 export * as serialize from './serialize';
-export * as string from './string';
 export * as styles from './styles';
 export * as table from './table';

packages/svelte-ux/src/routes/_NavMenu.svelte

@@ -104,7 +104,7 @@
     'uniqueStore',
   ];
 
-  const utils = ['cls', 'format', 'json', 'Logger'];
+  const utils = ['cls', 'format', 'json', 'Logger', 'string'];
 </script>
 
 <NavItem text="Getting Started" icon={mdiHome} currentUrl={$page.url} path="/" />

packages/svelte-ux/src/routes/docs/utils/string/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Preview from '$lib/components/Preview.svelte';
+  import { uniqueId, truncate, toTitleCase } from '$lib/utils/string';
+  import Code from '$lib/components/Code.svelte';
+  import RangeField from '$lib/components/RangeField.svelte';
+
+  let str = 'This is very long text that will be truncated';
+  let totalChars = 20;
+  let endChars = 5;
+</script>
+
+<h1>Usage</h1>
+
+<Code
+  source={`import { uniqueId, truncate, toTitleCase } from 'svelte-ux';`}
+  language="javascript"
+  class="mb-4"
+/>
+
+<h1>Examples</h1>
+
+<h2>truncate()</h2>
+
+<Code source={`import { truncate } from 'svelte-ux';`} language="javascript" class="mb-4" />
+
+<h3>Playground</h3>
+<div class="grid grid-cols-2 gap-2 mb-2">
+  <RangeField label="Total chars" bind:value={totalChars} />
+  <RangeField label="End chars" bind:value={endChars} />
+</div>
+<Preview>
+  <div>{truncate(str, totalChars, endChars)}</div>
+</Preview>
+
+<h3>Total only</h3>
+<Preview>
+  <div>{truncate(str, 20)}</div>
+</Preview>
+
+<h3>Middle ellipsis</h3>
+<Preview>
+  <div>{truncate(str, 20, 10)}</div>
+</Preview>
+
+<h2>unique()</h2>
+
+<Code source={`import { uniqueId } from 'svelte-ux';`} language="javascript" class="mb-4" />
+
+<h3>Basic</h3>
+<Preview>
+  <div>{uniqueId('checkbox-')}</div>
+  <div>{uniqueId('checkbox-')}</div>
+  <div>{uniqueId('checkbox-')}</div>
+  <div>{uniqueId('radio-')}</div>
+</Preview>

packages/svelte-ux/src/routes/docs/utils/string/+page.ts

@@ -0,0 +1,12 @@
+import source from '$lib/utils/string.ts?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      source,
+      pageSource,
+      description: 'String utilities',
+    },
+  };
+}