utils-cls-format-string

docs/src/content/utils/cls.md

@@ -0,0 +1,19 @@
+---
+description: Utility function wrapper around tailwind-merge and clsx for easy style overrides.
+category: tools
+layers: []
+related: [/docs/components/BrushContext/selection, https://github.com/dcastil/tailwind-merge, https://github.com/lukeed/clsx, https://www.layerstack.dev/docs/tailwind/utils]
+---
+
+<script lang="ts">
+  import Example from '$lib/components/Example.svelte';
+  import { cls } from '@layerstack/tailwind';
+</script>
+
+## Usage
+
+### cls()
+
+<div class={cls('grid place-items-center rounded p-2 bg-error-500', true && 'bg-success-500')}>clsx allows for conditional class additions<br />tailwind-merge dedups overlapping classes</div>
+<br />
+<Example name="cls" resize={false} showcode />

docs/src/content/utils/format.md

@@ -0,0 +1,18 @@
+---
+description: Utility function to easily manipulate numbers and dates to different formats and locales.
+category: tools
+layers: []
+related: [/docs/components/BarChart/sparkbar-fixed-position-tooltip, https://www.layerstack.dev/docs/utils/format#playgrounds]
+---
+
+<script lang="ts">
+  import Example from '$lib/components/Example.svelte';
+</script>
+
+## Usage
+
+### format()
+
+> <a href="https://www.layerstack.dev/docs/utils/format" target="_blank">Full API</a>
+
+<Example name="format" resize={false} showcode />

docs/src/content/utils/string.md

@@ -0,0 +1,27 @@
+---
+description: Utility string functions.
+category: tools
+layers: []
+related: [/docs/components/BarChart/duration-civilization-timeline, /docs/components/BarChart/duration-civilization-timeline-dense, /docs/components/Text/playground, components/Text, https://www.layerstack.dev/docs/utils/string]
+---
+
+<script lang="ts">
+  import Example from '$lib/components/Example.svelte';
+ 	import { truncate, toTitleCase } from '@layerstack/utils';
+</script>
+
+## Usage
+
+### truncate()
+
+> <a href="https://www.layerstack.dev/docs/utils/string" target="_blank">Full API</a>
+
+{truncate("This is a really long string of text.", 21)}
+
+<Example component="string" name="truncate" resize={false} showcode />
+
+### toTitleCase()
+
+{toTitleCase("string of text")}
+
+<Example component="string" name="toTitleCase" resize={false} showcode />

docs/src/examples/utils/cls/cls.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Code from '$lib/components/Code.svelte';
+
+	const clsSource = [
+		'<script lang="ts">',
+		"  import { cls } from '@layerstack/tailwind';",
+		'</' + 'script>',
+		'',
+		"<div class={cls('bg-error-500', true && 'bg-success-500')}>...</div>",
+		'// becomes <div class="bg-success-500"></div>'
+	].join('\n');
+</script>
+
+<Code source={clsSource} language="js" copyButton={false} />

docs/src/examples/utils/format/format.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { format } from '@layerstack/utils';
+
+	import Code from '$lib/components/Code.svelte';
+
+	const fmtSource =
+		` <script lang="ts">
+  import { format } from '@layerstack/utils';
+
+  format(1234.56, "integer");
+  format(1234.56, "decimal");
+  format(1234.56, "currency");
+  format(0.5678, "percent");
+  format(0.5678, "percentRound");
+  format(1_234_567, "metric");
+  format(new Date(), "day", { variant: "short" });
+  format(new Date(), "custom", { custom: "eee, MMMM do" });
+</` +
+		`script>
+`;
+</script>
+
+{format(1234.56, 'integer')}<br />
+{format(1234.56, 'decimal')}<br />
+{format(1234.56, 'currency')}<br />
+{format(0.5678, 'percent')}<br />
+{format(0.5678, 'percentRound')}<br />
+{format(1_234_567, 'metric')}<br />
+{format(new Date(), 'day', { variant: 'short' })}<br />
+{format(new Date(), 'custom', { custom: 'eee, MMMM do' })}<br />
+<Code source={fmtSource} language="js" copyButton={false} lang="ts" />

docs/src/examples/utils/string/toTitleCase.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Code from '$lib/components/Code.svelte';
+
+	const source =
+		` <script lang="ts">
+  import { toTitleCase } from '@layerstack/utils';
+
+	const str = 'string of text';
+	</` +
+		`script>
+
+	{toTitleCase(str)}`;
+</script>
+
+<Code {source} language="js" copyButton={false} lang="ts" />

docs/src/examples/utils/string/truncate.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Code from '$lib/components/Code.svelte';
+	import { truncate } from '@layerstack/utils';
+
+	const source =
+		`<script lang='ts'>
+		import { truncate } from '@layerstack/utils';
+
+		const str = 'This is a really long string of text.';
+	</` +
+		`script>
+	<div>{truncate(str, 21)}</div>`;
+
+	const str = 'This is a really long string of text.';
+</script>
+
+<Code {source} language="js" copyButton={false} lang="ts" />