Form builder

.github/workflows/run-lint-audit-tests-ui.yml

@@ -55,6 +55,7 @@ jobs:
           dedupe_issues: true
           working_directory: './mathesar_ui'
           issue_labels: 'restricted: maintainers,type: bug,work: frontend,status: triage'
+          production_flag: true
         continue-on-error: true
 
   tests:

mathesar_ui/.storybook/main.js

@@ -24,6 +24,16 @@ module.exports = {
       svelte: path.resolve('node_modules', 'svelte')
     }
     config.resolve.extensions.push(".ts", ".tsx", ".mjs", ".js", ".svelte");
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+      resolve: {
+        alias: {
+          "@": path.resolve(__dirname, "../src/"),
+        },
+      },
+    });
     return config;
   },
   "stories": [

mathesar_ui/.storybook/preview.js

@@ -1,3 +1,5 @@
+import "../src/component-library/styles.scss";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

mathesar_ui/package.json

@@ -38,6 +38,7 @@
     "@vitejs/plugin-legacy": "^1.5.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
+    "css-loader": "^6.5.1",
     "eslint": "^7.29.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-import-resolver-typescript": "^2.4.0",
@@ -48,6 +49,8 @@
     "eslint-plugin-svelte3": "^3.2.0",
     "jest": "^26.6.3",
     "sass": "^1.35.1",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
     "svelte": "^3.42.4",
     "svelte-check": "^2.2.5",
     "svelte-jester": "^1.7.0",

mathesar_ui/src/App.svelte

@@ -25,6 +25,16 @@
   </Route>
 </section>
 
+<!--
+  Supporting aliases in scss within the preprocessor is a bit of work.
+  I looked around to try to get it done but it didn't seem important to
+  spend time figuring this out.
+
+  The component-library style import would only ever be from App.svelte
+  and when the library is moved to a separate package, we wouldn't have to
+  worry about aliases.
+-->
 <style global lang="scss">
+  @import "component-library/styles.scss";
   @import "App.scss";
 </style>

mathesar_ui/src/component-library/button/Button.svelte

@@ -30,7 +30,3 @@
         on:keydown>
   <slot></slot>
 </button>
-
-<style global lang="scss">
-  @import "Button.scss";
-</style>

mathesar_ui/src/component-library/cancel-or-proceed-button-pair/CancelOrProceedButtonPair.svelte

@@ -63,7 +63,3 @@
     disabled={isProcessing || !canProceed}
   />
 </div>
-
-<style global lang='scss'>
-  @import './CancelOrProceedButtonPair.scss';
-</style>

mathesar_ui/src/component-library/checkbox/Checkbox.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import { getLabelControllerFromContainingLabel } from '@mathesar-component-library-dir/label/LabelController';
-  import { getGloballyUniqueId } from '@mathesar-component-library-dir/common/utils/domUtils';
+  import BaseInput from '@mathesar-component-library-dir/common/base-components/BaseInput.svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -25,12 +24,9 @@
   export let allowIndeterminate = false;
   export let value: string | number | string[] | undefined = undefined;
   export let disabled = false;
-  export let id = getGloballyUniqueId();
-  export let labelController = getLabelControllerFromContainingLabel();
+  export let id: string = undefined;
 
   $: indeterminate = allowIndeterminate && checked === null;
-  $: labelController?.disabled.set(disabled);
-  $: labelController?.inputId.set(id);
 
   function onChange(e: Event) {
     checked = !checked;
@@ -41,6 +37,8 @@
   }
 </script>
 
+<BaseInput {...$$restProps} bind:id {disabled}/>
+
 <input
   class="checkbox"
   type="checkbox"
@@ -51,7 +49,3 @@
   {value}
   on:change={onChange}
 />
-
-<style global lang="scss">
-  @import "Checkbox.scss";
-</style>

mathesar_ui/src/component-library/common/base-components/BaseInput.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { getLabelControllerFromContainingLabel } from '@mathesar-component-library-dir/label/LabelController';
+  import { getGloballyUniqueId } from '@mathesar-component-library-dir/common/utils/domUtils';
+
+  export let id = getGloballyUniqueId();
+  export let labelController = getLabelControllerFromContainingLabel();
+  export let disabled = false;
+
+  $: labelController?.disabled.set(disabled);
+  $: labelController?.inputId.set(id);
+</script>

mathesar_ui/src/component-library/common/styles/components/input.scss

@@ -0,0 +1,25 @@
+.input-element {
+  border: 1px solid #dfdfdf;
+  transition: all .2s;
+  align-items: center;
+  border-radius: 0.25rem;
+  background: #fff;
+  margin: 0;
+  padding: 6px 8px;
+  line-height: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  &:focus {
+    border-color: #489ee4;
+    outline: 0;
+    box-shadow: 0 0 0 2px #2087e633;
+  }
+
+  &:disabled {
+    background: #efefef;
+  }
+}

mathesar_ui/src/component-library/common/styles/main.scss

@@ -0,0 +1 @@
+@import "components/input.scss";

mathesar_ui/src/component-library/common/styles/variables.scss

@@ -0,0 +1,3 @@
+/**
+ * File to place common css & scss variables for the component library
+ */

mathesar_ui/src/component-library/dropdown/Dropdown.svelte

@@ -97,7 +97,8 @@
 </script>
 
 <Button bind:element={triggerElement} appearance={triggerAppearance} class={tgClasses} on:click={toggle} 
-  aria-controls={ariaControls} aria-haspopup="listbox" aria-label={ariaLabel} {size} on:keydown>
+  aria-controls={ariaControls} aria-haspopup="listbox" aria-label={ariaLabel} {size} on:keydown
+  {...$$restProps}>
   <span class="label">
     <slot name="trigger"></slot>
   </span>
@@ -123,7 +124,3 @@
     <slot name="content"></slot>
   </div>
 {/if}
-
-<style global lang="scss">
-  @import "Dropdown.scss";
-</style>

mathesar_ui/src/component-library/dynamic-input/BooleanInput.svelte

@@ -0,0 +1,14 @@
+<script lang='ts'>
+  import Checkbox from '@mathesar-component-library-dir/checkbox/Checkbox.svelte';
+  import type { DynamicInputInterfaceType } from './types.d';
+
+  export let value = undefined;
+  export let interfaceType: DynamicInputInterfaceType = undefined;
+</script>
+
+{#if interfaceType === 'toggle'}
+  <!--TODO: Add css to checkbox to show a toggle view -->
+  Toggle not implemented yet
+{:else}
+  <Checkbox {...$$restProps} bind:checked={value}/>
+{/if}

mathesar_ui/src/component-library/dynamic-input/DynamicInput.svelte

@@ -0,0 +1,51 @@
+<script lang='ts'>
+  import EnumInput from './EnumInput.svelte';
+  import StringInput from './StringInput..svelte';
+  import BooleanInput from './BooleanInput.svelte';
+  import NumberInput from '../number-input/NumberInput.svelte';
+  import type {
+    DynamicInputDataType,
+    DynamicInputInterfaceType,
+    DynamicInputSelectElement,
+  } from './types.d';
+
+  /**
+   * Type of input, one of: 'boolean', 'integer', 'float', 'string', 'date', 'datetime', 'time'
+   */
+  export let dataType: DynamicInputDataType;
+
+  /**
+   * Value of input. Depends on type.
+   */
+  export let value = undefined;
+
+  /**
+   * DOM input type for input.<br/>
+   * boolean -> checkbox, toggle, select. Default: checkbox.<br/>
+   * string -> text, textarea, select. Default: text.
+   */
+  export let interfaceType: DynamicInputInterfaceType = undefined;
+
+  let enumValues: unknown[] = undefined;
+
+  /**
+   * Applies when interfaceType is select. List of values to allow for value.
+   */
+  export { enumValues as enum };
+
+  /**
+   * Applies when interfaceType is select. Additional configuration for options
+   * that are displayed.
+   */
+  export let options: DynamicInputSelectElement['options'] = undefined;
+</script>
+
+{#if enumValues || interfaceType === 'select'}
+  <EnumInput {...$$restProps} {enumValues} {dataType} {options} bind:value/>
+{:else if dataType === 'boolean'}
+  <BooleanInput {...$$restProps} {interfaceType} bind:value/>
+{:else if dataType === 'integer' || dataType === 'float'}
+  <NumberInput {...$$restProps} isInteger={dataType === 'integer'} bind:value/>
+{:else if dataType === 'string'}
+  <StringInput {...$$restProps} {interfaceType} bind:value/>
+{/if}

mathesar_ui/src/component-library/dynamic-input/EnumInput.svelte

@@ -0,0 +1,24 @@
+<script lang='ts'>
+  import Select from '@mathesar-component-library-dir/select/Select.svelte';
+  import type { Appearance } from '@mathesar-component-library-dir/types.d';
+  import { generateSelectOptions, getSelectedValue, getInitialValue } from './utils';
+  import type { DynamicInputDataType, DynamicInputSelectElement } from './types.d';
+
+  export let dataType: DynamicInputDataType;
+  export let enumValues: unknown[] = undefined;
+  export let options: DynamicInputSelectElement['options'] = undefined;
+  export let triggerAppearance: Appearance = 'default';
+  export let value = getInitialValue(dataType, enumValues);
+
+  $: selectOptions = generateSelectOptions(dataType, enumValues, options);
+  $: selectedValue = getSelectedValue(selectOptions, value);
+
+  // TODO: Handle indeterminate state for boolean
+
+  function onChange(e: CustomEvent<{ option: { value: unknown } }>) {
+    value = e.detail?.option.value;
+  }
+</script>
+
+<Select idKey="value" {...$$restProps} {triggerAppearance}
+  options={selectOptions} value={selectedValue} on:change={onChange}/>

mathesar_ui/src/component-library/dynamic-input/StringInput..svelte

@@ -0,0 +1,14 @@
+<script lang='ts'>
+  import TextInput from '@mathesar-component-library-dir/text-input/TextInput.svelte';
+  import TextArea from '@mathesar-component-library-dir/text-area/TextArea.svelte';
+  import type { DynamicInputInterfaceType } from './types.d';
+
+  export let value = undefined;
+  export let interfaceType: DynamicInputInterfaceType = undefined;
+</script>
+
+{#if interfaceType === 'textarea'}
+  <TextArea {...$$restProps} bind:value/>
+{:else}
+  <TextInput {...$$restProps} bind:value/>
+{/if}

mathesar_ui/src/component-library/dynamic-input/__meta__/DynamicInput.mdx

@@ -0,0 +1,21 @@
+import { Story, Canvas, ArgsTable, Source } from '@storybook/addon-docs/blocks';
+import DynamicInput from '../DynamicInput.svelte';
+
+# DynamicInput
+
+DynamicInput system design specification.
+
+## Usage
+
+### Boolean type
+<Canvas>
+  <Story name="boolean" id="components-dynamicinput--boolean" />
+</Canvas>
+
+### String type
+<Canvas>
+  <Story name="string" id="components-dynamicinput--string" />
+</Canvas>
+
+## Arguments
+<ArgsTable of={DynamicInput} />

mathesar_ui/src/component-library/dynamic-input/__meta__/DynamicInput.stories.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import Docs from './DynamicInput.mdx';
+  import DynamicInput from '../DynamicInput.svelte';
+
+  const meta = {
+    title: 'Components/DynamicInput',
+    parameters: {
+      docs: {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        page: Docs,
+        source: {
+          type: 'code',
+        },
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Story name="Boolean">
+  <DynamicInput dataType="boolean"/>
+  <DynamicInput dataType="boolean" interfaceType="select"/>
+</Story>
+
+<Story name="String">
+  <DynamicInput dataType="string"/>
+  <DynamicInput dataType="string" interfaceType="textarea"/>
+  <DynamicInput dataType="string" enum={['Pichu', 'Pikachu', 'Raichu']}/>
+</Story>

mathesar_ui/src/component-library/dynamic-input/types.d.ts

@@ -0,0 +1,19 @@
+import type { SelectOption } from '@mathesar-component-library-dir/select/Select.d';
+
+export type DynamicInputDataType =
+  'boolean' | 'integer' | 'float' | 'string' | 'date' | 'datetime' | 'time';
+
+export type DynamicInputInterfaceType =
+  'text' | 'textarea' | 'number' | 'checkbox' | 'toggle' | 'select';
+
+export interface DynamicInputSelectElement {
+  interfaceType: 'select',
+  options?: Record<string, {
+    label?: string,
+  }>
+}
+
+export interface EnumSelectOption extends SelectOption<unknown> {
+  value: unknown,
+  label: string
+}