[docs]: add Flex configurator (#405)

* [docs]: add Flex configurator

* [docs]: remove unused Flex configurator options

* [docs]: update Flex configurator option labels

* [docs]: fix typo in Flex configurator

apps/docs/src/routes/core/flex/+page.md

@@ -25,4 +25,4 @@ docs: 'core/flex'
 
 ## Usage
 
-<Demo demo={FlexDemos.usage} />
+<Demo demo={FlexDemos.configurator} />

packages/svelteui-demos/src/demos/core/Flex/Flex.demo.configurator.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" context="module">
+	import type { ConfiguratorDemoType, ConfiguratorDemoConfiguration } from '$lib/types';
+
+	const codeTemplate = (props: string) => `<script>
+	import { Button, Flex } from '@svelteuidev/core';
+<\/script>
+
+<Flex${props}>
+	<Button>Button 1</Button>
+	<Button>Button 2</Button>
+	<Button>Button 3</Button>
+</Flex>`;
+
+export const type: ConfiguratorDemoType['type'] = 'configurator';
+
+export const configuration: ConfiguratorDemoConfiguration = {
+		codeTemplate,
+		configurator: [
+			{
+				name: 'justify',
+				type: 'select',
+				data: [
+					{ label: 'Left', value: 'left' },
+					{ label: 'Right', value: 'right' },
+					{ label: 'Center', value: 'center' },
+					{ label: 'Space Around', value: 'space-around' },
+					{ label: 'Space Between', value: 'space-between' },
+					{ label: 'Space Evenly', value: 'space-evenly' }
+				],
+				initialValue: 'left',
+				defaultValue: 'left'
+			},
+			{
+				name: 'direction',
+				type: 'select',
+				data: [
+					{ label: 'Row', value: 'row' },
+					{ label: 'Column', value: 'column' }
+				],
+				initialValue: 'row',
+				defaultValue: 'row'
+			},
+			{
+				name: 'wrap',
+				type: 'select',
+				data: [
+					{ label: 'Wrap', value: 'wrap' },
+					{ label: 'No Wrap', value: 'nowrap' }
+				],
+				initialValue: 'wrap',
+				defaultValue: 'wrap'
+			},
+			{ name: 'gap', type: 'size', initialValue: 'sm', defaultValue: 'sm' },
+		]
+	};
+</script>
+
+<script lang="ts">
+	import { Button, Flex } from '@svelteuidev/core';
+	import type { FlexProps } from '@svelteuidev/core';
+
+	export let props: FlexProps = {};
+</script>
+
+<Flex {...props}>
+	<Button>Button 1</Button>
+	<Button>Button 2</Button>
+	<Button>Button 3</Button>
+</Flex>

packages/svelteui-demos/src/demos/core/Flex/index.ts

@@ -1 +1 @@
-export * as usage from './Flex.demo.usage.svelte';
+export * as configurator from './Flex.demo.configurator.svelte';