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,117 @@
|
||||
<script lang="ts">
|
||||
import CodeSnippet from '$lib/components/CodeSnippet/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import Checkbox from '$lib/components/Form/Checkbox.svelte';
|
||||
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
|
||||
import Grade from '$lib/components/Question/Grade.svelte';
|
||||
|
||||
export let title = '';
|
||||
export let index = 1;
|
||||
export let code;
|
||||
export let name = '';
|
||||
export let options = [];
|
||||
export let onSubmit = () => {};
|
||||
export let onPrevious = () => {};
|
||||
export let defaultValue = [];
|
||||
export let disablePreviousButton = false;
|
||||
export let disabled = false;
|
||||
export let isPreview = false;
|
||||
export let nextButtonProps = {};
|
||||
export let grade: number | undefined;
|
||||
export let gradeMax = 0;
|
||||
export let disableGrading = false;
|
||||
|
||||
function getVal(form, name) {
|
||||
let values = [];
|
||||
const checkboxEl = form.elements[name];
|
||||
|
||||
for (let i = 0, len = checkboxEl.length; i < len; i++) {
|
||||
if (checkboxEl[i].checked) {
|
||||
values.push(checkboxEl[i].value);
|
||||
}
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
function handleFormSubmit(event) {
|
||||
if (isPreview) return;
|
||||
const values = getVal(event.target, name);
|
||||
onSubmit(name, values, nextButtonProps.isActive);
|
||||
event.target.reset();
|
||||
}
|
||||
|
||||
function handlePrevious(event) {
|
||||
event.preventDefault();
|
||||
onPrevious();
|
||||
}
|
||||
|
||||
function getValidationClassName(option) {
|
||||
if (defaultValue.includes(option.value)) {
|
||||
if (option.is_correct) {
|
||||
return 'border-green-700';
|
||||
} else {
|
||||
return 'border-red-700';
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleFormSubmit}>
|
||||
<div class="flex items-center justify-between">
|
||||
<HtmlRender className="mt-4">
|
||||
<svelte:fragment slot="content">
|
||||
<span class={`${typeof grade === 'number' ? 'w-3/4' : ''} flex gap-1`}>
|
||||
<h3>{index}</h3>
|
||||
<h3>
|
||||
{title}
|
||||
</h3>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
</HtmlRender>
|
||||
<Grade {gradeMax} bind:grade {disableGrading} />
|
||||
</div>
|
||||
|
||||
{#if code}
|
||||
<CodeSnippet {code} />
|
||||
{/if}
|
||||
|
||||
<div class="ml-4">
|
||||
{#each options as option}
|
||||
<button
|
||||
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-neutral-800 w-full {getValidationClassName(
|
||||
option
|
||||
)}"
|
||||
type="button"
|
||||
>
|
||||
<Checkbox
|
||||
{name}
|
||||
className="p-2"
|
||||
value={option.value}
|
||||
checked={defaultValue.includes(option.value)}
|
||||
label={option.label || option.value}
|
||||
{disabled}
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if !isPreview}
|
||||
<div class="mt-3 flex items-center justify-between w-full">
|
||||
<PrimaryButton
|
||||
onClick={handlePrevious}
|
||||
label="Previous"
|
||||
isDisabled={disablePreviousButton}
|
||||
variant={VARIANTS.OUTLINED}
|
||||
/>
|
||||
<PrimaryButton
|
||||
variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
|
||||
type="submit"
|
||||
label={nextButtonProps.label}
|
||||
{name}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
export let gradeMax = 0;
|
||||
export let disableGrading = false;
|
||||
export let grade: number | undefined;
|
||||
</script>
|
||||
|
||||
{#if typeof grade !== 'undefined'}
|
||||
<div class="flex items-center">
|
||||
<TextField
|
||||
placeholder="Points"
|
||||
bind:value={grade}
|
||||
type="number"
|
||||
className="w-12"
|
||||
isDisabled={disableGrading}
|
||||
/>
|
||||
<p class="dark:text-white ml-2 text-lg flex items-center">
|
||||
<span class="mr-1">/</span> <span>{gradeMax}</span>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,118 @@
|
||||
<script lang="ts">
|
||||
import CodeSnippet from '$lib/components/CodeSnippet/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import RadioItem from '$lib/components/Form/RadioItem.svelte';
|
||||
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
|
||||
import Grade from '$lib/components/Question/Grade.svelte';
|
||||
|
||||
export let title = '';
|
||||
export let index = 1;
|
||||
export let code = '';
|
||||
export let name = '';
|
||||
export let options = [];
|
||||
export let onSubmit = () => {};
|
||||
export let onPrevious = () => {};
|
||||
export let defaultValue = '';
|
||||
export let disablePreviousButton = false;
|
||||
export let disabled = false;
|
||||
export let isPreview = false;
|
||||
export let nextButtonProps = {};
|
||||
export let grade: number;
|
||||
export let gradeMax = 0;
|
||||
export let disableGrading = false;
|
||||
export let labelClassName = '';
|
||||
export let disableOptContainerMargin = false;
|
||||
|
||||
function getRadioVal(form, name) {
|
||||
let val;
|
||||
const radios = form.elements[name];
|
||||
|
||||
for (let i = 0, len = radios.length; i < len; i++) {
|
||||
if (radios[i].checked) {
|
||||
val = radios[i].value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
function handleFormSubmit(event) {
|
||||
if (isPreview) return;
|
||||
const value = getRadioVal(event.target, name);
|
||||
onSubmit(name, [value], nextButtonProps.isActive);
|
||||
event.target.reset();
|
||||
}
|
||||
|
||||
function handlePrevious(event) {
|
||||
event.preventDefault();
|
||||
onPrevious();
|
||||
}
|
||||
|
||||
function getValidationClassName(option) {
|
||||
if (defaultValue.includes(option.value)) {
|
||||
if (option.is_correct) {
|
||||
return 'border-green-700';
|
||||
} else {
|
||||
return 'border-red-700';
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleFormSubmit}>
|
||||
<div class="flex items-center justify-between">
|
||||
<HtmlRender className="mt-4">
|
||||
<svelte:fragment slot="content">
|
||||
<span class="dark:text-white flex items-center gap-1 {labelClassName}">
|
||||
<h3>{index}</h3>
|
||||
<h3>{title}</h3>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
</HtmlRender>
|
||||
<Grade {gradeMax} bind:grade {disableGrading} />
|
||||
</div>
|
||||
|
||||
{#if code}
|
||||
<CodeSnippet {code} />
|
||||
{/if}
|
||||
|
||||
<div class={!disableOptContainerMargin && 'ml-4'}>
|
||||
{#each options as option}
|
||||
<button
|
||||
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-neutral-800 w-full {getValidationClassName(
|
||||
option
|
||||
)}"
|
||||
type="button"
|
||||
>
|
||||
<RadioItem
|
||||
className="p-2"
|
||||
{name}
|
||||
value={option.value}
|
||||
checked={defaultValue.includes(option.value) && option.is_correct}
|
||||
label={option.label || option.value}
|
||||
{disabled}
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if !isPreview}
|
||||
<div class="mt-3 flex items-center justify-between w-full">
|
||||
<PrimaryButton
|
||||
onClick={handlePrevious}
|
||||
label="Previous"
|
||||
isDisabled={disablePreviousButton}
|
||||
variant={VARIANTS.OUTLINED}
|
||||
/>
|
||||
<PrimaryButton
|
||||
variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
|
||||
type="submit"
|
||||
label={nextButtonProps.label}
|
||||
{name}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import CodeSnippet from '$lib/components/CodeSnippet/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import TextArea from '$lib/components/Form/TextArea.svelte';
|
||||
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
|
||||
import Grade from '$lib/components/Question/Grade.svelte';
|
||||
|
||||
export let title = '';
|
||||
export let index = 1;
|
||||
export let code = '';
|
||||
export let name = '';
|
||||
export let onSubmit = () => {};
|
||||
export let onPrevious = () => {};
|
||||
export let defaultValue = '';
|
||||
export let disablePreviousButton = false;
|
||||
export let isLast = false;
|
||||
export let isPreview = false;
|
||||
export let disabled = false;
|
||||
export let grade: number | undefined;
|
||||
export let gradeMax = 0;
|
||||
export let disableGrading = false;
|
||||
|
||||
function handleFormSubmit(event) {
|
||||
if (isPreview) return;
|
||||
|
||||
onSubmit(name, defaultValue, true);
|
||||
// event.target.reset();
|
||||
}
|
||||
|
||||
function handlePrevious(event) {
|
||||
event.preventDefault();
|
||||
onPrevious();
|
||||
}
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleFormSubmit}>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<HtmlRender className="mt-4">
|
||||
<svelte:fragment slot="content">
|
||||
<span class={`${typeof grade === 'number' ? 'w-3/4' : ''} flex gap-1`}>
|
||||
<h3>{index}</h3>
|
||||
<h3>{title}</h3>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
</HtmlRender>
|
||||
<Grade {gradeMax} bind:grade {disableGrading} />
|
||||
</div>
|
||||
|
||||
{#if code}
|
||||
<CodeSnippet {code} />
|
||||
{/if}
|
||||
|
||||
<div class="ml-4">
|
||||
{#if disabled}
|
||||
<div class="bg-gray-200 dark:bg-gray-500 p-5 rounded-md mb-3">
|
||||
{defaultValue}
|
||||
</div>
|
||||
{:else}
|
||||
<TextArea bind:value={defaultValue} rows="5" placeholder="Write your answer here" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !isPreview}
|
||||
<div class="mt-3 flex items-center justify-between w-full">
|
||||
<PrimaryButton
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={handlePrevious}
|
||||
label="Previous"
|
||||
isDisabled={disablePreviousButton}
|
||||
/>
|
||||
<PrimaryButton
|
||||
variant={VARIANTS.OUTLINED}
|
||||
type="submit"
|
||||
label={isLast ? 'Finish' : 'Next'}
|
||||
{name}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
@@ -0,0 +1,33 @@
|
||||
export const QUESTION_TYPE = {
|
||||
RADIO: 1,
|
||||
CHECKBOX: 2,
|
||||
TEXTAREA: 3
|
||||
};
|
||||
|
||||
export const QUESTION_TYPES = [
|
||||
{
|
||||
id: QUESTION_TYPE.RADIO,
|
||||
label: 'Single answer'
|
||||
},
|
||||
{
|
||||
id: QUESTION_TYPE.CHECKBOX,
|
||||
label: 'Multiple answers'
|
||||
},
|
||||
{
|
||||
id: QUESTION_TYPE.TEXTAREA,
|
||||
label: 'Paragraph'
|
||||
}
|
||||
];
|
||||
|
||||
export const QUESTION_TEMPLATE = {
|
||||
id: 1,
|
||||
title: '',
|
||||
type: QUESTION_TYPE.RADIO,
|
||||
answers: [],
|
||||
options: [
|
||||
{
|
||||
id: 1,
|
||||
value: null
|
||||
}
|
||||
]
|
||||
};
|
||||
Reference in New Issue
Block a user