feat: 🚀 😃 convert repo into a monorepo 🚀 😃 (#51)
* Merge main into turbo-monrepo * feat: rename apps * feat: remove supbase videos and serve all from project * feat: move supabase to root * feat: update README * docs: update link
This commit is contained in:
Rotimi Best
@@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
export let label = '';
|
||||
export let value: string | number | null;
|
||||
export let placeholder = '';
|
||||
export let inputClassName = '';
|
||||
export let labelClassName = 'font-light';
|
||||
export let isDisabled = false;
|
||||
export let isRequired = false;
|
||||
export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-neutral-800 dark:text-white';
|
||||
export let errorMessage = '';
|
||||
export let helperMessage = '';
|
||||
export let onInput = (e) => {};
|
||||
export let onKeyDown = (e) => {};
|
||||
export let onInputChange = (e) => {};
|
||||
export let onChange = () => {}; // This is to know if element is 'dirty'
|
||||
|
||||
let focusClass = '';
|
||||
</script>
|
||||
|
||||
{#if label}
|
||||
<p class="text-sm dark:text-white text-left m-0 {labelClassName}">
|
||||
{label}
|
||||
|
||||
{#if isRequired}
|
||||
<span class="text-red-700">*</span>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
<span
|
||||
class="form-input custom-placeholder w-full block overflow-hidden resize min-h-[50px] leading-5 border mt-2 p-3 pt-3.5 outline-none dark:text-black dark:bg-white form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 {inputClassName} {focusClass} {isDisabled &&
|
||||
'hover:cursor-not-allowed opacity-50'} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
|
||||
? 'border-red-600'
|
||||
: ''}"
|
||||
role="textbox"
|
||||
tabindex={0}
|
||||
contenteditable
|
||||
on:input={onInput}
|
||||
on:keydown={onKeyDown}
|
||||
on:change={onInputChange}
|
||||
on:blur={(e) => {
|
||||
if (focusClass.includes('border-primary-600')) {
|
||||
focusClass = focusClass.replace('border-primary-600', '');
|
||||
}
|
||||
onChange(e);
|
||||
}}
|
||||
on:focus={() => (focusClass += ' border-primary-600')}
|
||||
style="--placeholder: '{placeholder}'">{value}</span
|
||||
>
|
||||
{#if errorMessage}
|
||||
<p class="text-sm text-red-500">{errorMessage}</p>
|
||||
{:else if helperMessage}
|
||||
<p class="dark:text-white text-sm">
|
||||
{helperMessage}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.custom-placeholder:empty::before {
|
||||
content: var(--placeholder, 'Default Placeholder');
|
||||
}
|
||||
.form-input {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script>
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
|
||||
export let label;
|
||||
export let value;
|
||||
export let checked;
|
||||
export let name;
|
||||
export let isEditable = false;
|
||||
export let disabled = false;
|
||||
export let className = '';
|
||||
export let onChange;
|
||||
</script>
|
||||
|
||||
<label
|
||||
class="{className} inline-flex items-center w-full {disabled
|
||||
? 'cursor-not-allowed'
|
||||
: 'cursor-pointer'}"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
|
||||
{name}
|
||||
{value}
|
||||
disabled={disabled || isEditable}
|
||||
bind:checked
|
||||
/>
|
||||
{#if isEditable}
|
||||
<div class="w-2/4">
|
||||
<TextField
|
||||
bind:value={label}
|
||||
placeholder="Your option"
|
||||
className="ml-1"
|
||||
type="text"
|
||||
{onChange}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="dark:text-white ml-2">{label}</span>
|
||||
{/if}
|
||||
|
||||
<slot name="iconbutton" />
|
||||
</label>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script>
|
||||
export let label;
|
||||
export let placeholder;
|
||||
export let value;
|
||||
export let className = '';
|
||||
export let onChange = () => {}; // This is to know if element is 'dirty'
|
||||
</script>
|
||||
|
||||
<label class="block {className}">
|
||||
<span class="text-gray-700 dark:bg-neutral-800 dark:text-white">{label}</span>
|
||||
<input
|
||||
bind:value
|
||||
{placeholder}
|
||||
type="date"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-neutral-800 dark:text-white"
|
||||
on:blur={onChange}
|
||||
/>
|
||||
</label>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
export let label = '';
|
||||
export let placeholder = '';
|
||||
export let value: string | Date = '';
|
||||
export let className = '';
|
||||
export let onInput = () => {};
|
||||
export let isRequired: boolean = false;
|
||||
</script>
|
||||
|
||||
<label class="block {className}">
|
||||
<span class="text-gray-700 dark:text-white"
|
||||
>{label}
|
||||
{#if isRequired}
|
||||
<span class="text-red-700">*</span>
|
||||
{/if}
|
||||
</span>
|
||||
<input
|
||||
bind:value
|
||||
on:input={onInput}
|
||||
{placeholder}
|
||||
type="datetime-local"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-neutral-800 dark:text-white"
|
||||
/>
|
||||
</label>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
export let label = '';
|
||||
export let value = '';
|
||||
export let checked = false;
|
||||
export let name = '';
|
||||
export let isEditable = false;
|
||||
export let disabled = false;
|
||||
export let className = '';
|
||||
export let onChange = () => {}; // This is to know if element is 'dirty'
|
||||
</script>
|
||||
|
||||
<label
|
||||
class="{className} inline-flex items-center w-full {disabled
|
||||
? 'cursor-not-allowed'
|
||||
: 'cursor-pointer'}"
|
||||
>
|
||||
<input
|
||||
class="form-radio"
|
||||
type="radio"
|
||||
{checked}
|
||||
{name}
|
||||
{value}
|
||||
disabled={disabled || isEditable}
|
||||
/>
|
||||
{#if isEditable}
|
||||
<div class="w-2/4">
|
||||
<TextField
|
||||
bind:value={label}
|
||||
placeholder="Your option"
|
||||
className="ml-1"
|
||||
type="text"
|
||||
{onChange}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="dark:text-white ml-2">{label}</span>
|
||||
{/if}
|
||||
|
||||
<slot name="iconbutton" />
|
||||
</label>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let label = '';
|
||||
export let value;
|
||||
export let options = [];
|
||||
export let labelKey = 'label';
|
||||
export let isRequired = false;
|
||||
export let className = '';
|
||||
export let selectClassName = '';
|
||||
export let onChange = () => {}; // This is to know if element is 'dirty'
|
||||
|
||||
// onMount(() => {
|
||||
// value = options[0];
|
||||
// });
|
||||
</script>
|
||||
|
||||
<label class="block {className}">
|
||||
{#if label}
|
||||
<span class="text-gray-700 dark:text-white mr-2">{label}</span>
|
||||
{/if}
|
||||
<select
|
||||
bind:value
|
||||
class="form-select block w-auto mt-1 dark:bg-neutral-800 dark:text-white {selectClassName}"
|
||||
required={isRequired}
|
||||
on:blur={() => {}}
|
||||
on:change={onChange}
|
||||
class:customColor={!!selectClassName}
|
||||
>
|
||||
{#each options as option}
|
||||
<option class="bg-white text-black" value={option}>
|
||||
{option[labelKey]}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<style>
|
||||
select.customColor {
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' class='text-white' viewBox='0 0 20 20'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
select.customColor option {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
import CustomPromptBtn from '$lib/components/AI/AIButton/CustomPromptBtn.svelte';
|
||||
import type { PopoverProps } from 'carbon-components-svelte/types/Popover/Popover.svelte';
|
||||
|
||||
export let label = '';
|
||||
export let disabled = false;
|
||||
export let placeholder = 'Write your answer...';
|
||||
export let value = '';
|
||||
export let rows = 3;
|
||||
// export let maxRows = 3;
|
||||
export let className = '';
|
||||
export let labelClassName = '';
|
||||
export let bgColor = 'bg-gray-50 focus:bg-primary-50 dark:bg-neutral-700 dark:text-white';
|
||||
export let helperMessage = '';
|
||||
export let errorMessage = '';
|
||||
export let isRequired = false;
|
||||
export let onChange = () => {}; // This is to know if element is 'dirty'
|
||||
export let ref = null;
|
||||
export let isAIEnabled = false;
|
||||
export let initAIPrompt = '';
|
||||
export let aiAlignPopover: PopoverProps['align'] = 'left';
|
||||
|
||||
// $: minHeight = `${1 + parseInt(rows, 10) * 1.2}em`;
|
||||
// $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
|
||||
</script>
|
||||
|
||||
<label for="text-field" class="block w-full relative {className}">
|
||||
{#if label}
|
||||
<p class="dark:text-white text-left w-full flex items-center justify-between {labelClassName}">
|
||||
<span>
|
||||
{label}
|
||||
{#if isRequired}
|
||||
<span class="text-red-700">*</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
{#if isAIEnabled}
|
||||
<CustomPromptBtn
|
||||
bind:defaultPrompt={initAIPrompt}
|
||||
alignPopover={aiAlignPopover}
|
||||
handleInsert={(v) => {
|
||||
value = v;
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<!-- <pre
|
||||
aria-hidden="true"
|
||||
style="min-height: {minHeight}; max-height: {maxHeight}">
|
||||
{value + '\n'}
|
||||
</pre> -->
|
||||
|
||||
<textarea
|
||||
{disabled}
|
||||
{rows}
|
||||
{placeholder}
|
||||
bind:value
|
||||
bind:this={ref}
|
||||
required={isRequired}
|
||||
class="form-textarea border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 mt-1 block w-full
|
||||
{bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
|
||||
on:change={onChange}
|
||||
/>
|
||||
{#if !!errorMessage}
|
||||
<p class="text-sm text-red-500">
|
||||
{errorMessage}
|
||||
</p>
|
||||
{:else if helperMessage}
|
||||
<p class="text-sm text-gray-500 dark:text-white">
|
||||
{helperMessage}
|
||||
</p>
|
||||
{/if}
|
||||
<slot name="iconbutton" />
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.form-textarea {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import PasswordEye from '../Icons/PasswordEye.svelte';
|
||||
|
||||
export let label = '';
|
||||
export let placeholder = '';
|
||||
export let value: string | number | null = null;
|
||||
export let name = '';
|
||||
export let onKeyDown = (e) => {};
|
||||
export let className = '';
|
||||
export let inputClassName = '';
|
||||
export let labelClassName = 'font-light';
|
||||
export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-neutral-700 dark:text-white';
|
||||
export let type = 'text';
|
||||
export let isPassword = false;
|
||||
export let autoFocus = false;
|
||||
export let isRequired = false;
|
||||
export let isDisabled = false;
|
||||
export let min = undefined;
|
||||
export let max = undefined;
|
||||
export let errorMessage = '';
|
||||
export let helperMessage = '';
|
||||
export let autoComplete = true;
|
||||
export let onChange = () => {}; // This is to know if element is 'dirty'
|
||||
export let onInputChange = () => {};
|
||||
|
||||
let ref: HTMLInputElement | undefined = undefined;
|
||||
let fieldNode: HTMLInputElement | undefined = undefined;
|
||||
let focusClass = '';
|
||||
|
||||
function typeAction(node: HTMLInputElement | undefined) {
|
||||
if (!node) return;
|
||||
|
||||
node.type = type || 'text';
|
||||
|
||||
if (isRequired) {
|
||||
node.required = true;
|
||||
}
|
||||
|
||||
fieldNode = node;
|
||||
}
|
||||
|
||||
function handlePasswordEye() {
|
||||
type = type === 'password' ? 'text' : 'password';
|
||||
typeAction(fieldNode);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (autoFocus && ref) {
|
||||
ref.focus();
|
||||
}
|
||||
|
||||
if (type === 'password') {
|
||||
isPassword = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<label class="block relative {className}">
|
||||
{#if label}
|
||||
<p for="text-field" class="text-sm dark:text-white text-left m-0 {labelClassName}">
|
||||
{label}
|
||||
|
||||
{#if isRequired}
|
||||
<span class="text-red-700">*</span>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
<input
|
||||
use:typeAction
|
||||
class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 {inputClassName} {focusClass} {isDisabled &&
|
||||
'hover:cursor-not-allowed opacity-50'} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
|
||||
? 'border-red-600'
|
||||
: ''}"
|
||||
on:keydown={onKeyDown}
|
||||
on:change={onInputChange}
|
||||
{placeholder}
|
||||
bind:value
|
||||
bind:this={ref}
|
||||
required={isRequired}
|
||||
disabled={isDisabled}
|
||||
autocomplete={autoComplete ? 'on' : 'off'}
|
||||
on:blur={(e) => {
|
||||
if (focusClass.includes('border-primary-600')) {
|
||||
focusClass = focusClass.replace('border-primary-600', '');
|
||||
}
|
||||
onChange(e);
|
||||
}}
|
||||
on:focus={() => (focusClass += ' border-primary-600')}
|
||||
{name}
|
||||
{min}
|
||||
{max}
|
||||
/>
|
||||
{#if isPassword}
|
||||
<span class="password-eye">
|
||||
<IconButton value="write-code" onClick={handlePasswordEye}>
|
||||
<PasswordEye isClosed={type === 'password' ? true : false} />
|
||||
</IconButton>
|
||||
</span>
|
||||
{/if}
|
||||
{#if errorMessage}
|
||||
<p class="text-sm text-red-500">{errorMessage}</p>
|
||||
{:else if helperMessage}
|
||||
<p class="dark:text-white text-sm">
|
||||
{helperMessage}
|
||||
</p>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.form-input {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.password-eye {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 6px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user