Reorganize input components

src/lib/components/forms/Field.svelte → src/lib/components/common/Field.svelte

@@ -1,3 +1,9 @@
+<!-- @component
+  Field is a presentational component for displaying inputs.
+  It has a slot for displaying styled "help" text,
+  for providing more instruction on a field's purpose or meaning.
+-->
+
 <script lang="ts">
   import Flex from "$lib/components/common/Flex.svelte";
 

src/lib/components/forms/FieldLabel.svelte → src/lib/components/common/FieldLabel.svelte

@@ -1,6 +1,11 @@
+<!-- @component
+  FieldLabel is a presentational component for giving title and details about a field.
+  It has props for whether the field is required or exclusive to premium account holders.
+-->
+
 <script lang="ts">
   import PremiumBadge from "@/premium-credits/PremiumBadge.svelte";
-  import Flex from "$lib/components/common/Flex.svelte";
+  import Flex from "./Flex.svelte";
 
   export let required = false;
   export let premium = false;

src/lib/components/forms/stories/FieldLabel.stories.svelte → src/lib/components/common/stories/FieldLabel.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module" lang="ts">
   import { Template, Story } from "@storybook/addon-svelte-csf";
-  import FieldLabel from "../FieldLabel.svelte";
+  import FieldLabel from "..//FieldLabel.svelte";
   import { Infinity16 } from "svelte-octicons";
 
   export const meta = {
-    title: "Components / Forms / Inputs / Field Label",
+    title: "Components / Common / Field Label",
     component: FieldLabel,
     tags: ["autodocs"],
     parameters: { layout: "centered" },

src/lib/components/common/stories/PageToolbar.stories.svelte

@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
   import { Story } from "@storybook/addon-svelte-csf";
   import PageToolbar from "../PageToolbar.svelte";
-  import Checkbox from "../Checkbox.svelte";
+  import Checkbox from "../../inputs/Checkbox.svelte";
   import Paginator from "@/common/Paginator.svelte";
 
   export const meta = {

src/lib/components/forms/DocumentUpload.svelte

@@ -3,18 +3,19 @@
   import { _ } from "svelte-i18n";
   import { File16, File24, Upload16, XCircleFill24 } from "svelte-octicons";
 
-  import AccessLevel from "./AccessLevel.svelte";
   import Button from "../common/Button.svelte";
-  import Dropzone from "./Dropzone.svelte";
   import Empty from "../common/Empty.svelte";
-  import Field from "./Field.svelte";
-  import FieldLabel from "./FieldLabel.svelte";
-  import Flex from "$lib/components/common/Flex.svelte";
-  import InputFile from "./InputFile.svelte";
-  import InputSelect from "./InputSelect.svelte";
-  import InputText from "./InputText.svelte";
+  import Field from "../common/Field.svelte";
+  import FieldLabel from "../common/FieldLabel.svelte";
+  import Flex from "../common/Flex.svelte";
   import Premium from "../common/Premium.svelte";
-  import Switch from "$lib/components/common/Switch.svelte";
+
+  import AccessLevel from "../inputs/AccessLevel.svelte";
+  import Dropzone from "../inputs/Dropzone.svelte";
+  import FileInput from "../inputs/File.svelte";
+  import Select from "../inputs/Select.svelte";
+  import Switch from "../inputs/Switch.svelte";
+  import Text from "../inputs/Text.svelte";
 
   import { DOCUMENT_TYPES } from "@/config/config.js";
   import { removeUnsupportedTypes } from "@/lib/utils/validateFiles";
@@ -107,7 +108,7 @@
               {formatFileType(file.type)} / {filesize(file.size)}
             </p>
             <div class="title">
-              <InputText name="title" bind:value={file.name} />
+              <Text name="title" bind:value={file.name} />
             </div>
             <button
               class="fileRemove"
@@ -135,8 +136,8 @@
             <p class="drop-instructions">Drag and drop files here</p>
             <Flex align="center" justify="center">
               <span class="drop-instructions-or">or</span>
-              <InputFile multiple onFileSelect={addFiles}
-                ><File16 /> Select Files</InputFile
+              <FileInput multiple onFileSelect={addFiles}
+                ><File16 /> Select Files</FileInput
               >
             </Flex>
           </div>
@@ -151,12 +152,12 @@
         </Field>
         <Field>
           <FieldLabel>Projects</FieldLabel>
-          <InputSelect name="projects" multiple items={projectOptions} />
+          <Select name="projects" multiple items={projectOptions} />
         </Field>
         <hr class="divider" />
         <Field>
           <FieldLabel>OCR Engine</FieldLabel>
-          <InputSelect
+          <Select
             name="ocr_engine"
             items={ocrEngineOptions}
             bind:value={ocrEngine}

src/lib/components/forms/AccessLevel.svelte → src/lib/components/inputs/AccessLevel.svelte

@@ -10,37 +10,38 @@
 
   interface Level {
     value: access;
-    name: string;
+    title: string;
     description: string;
     icon: typeof SvgComponent;
   }
 
   const levels: Level[] = [
     {
       value: "private",
-      name: "Private",
+      title: "Private",
       description: "Documents will only be visible to you",
       icon: Lock24,
     },
     {
       value: "organization",
-      name: "Organization",
+      title: "Organization",
       description: "Documents will only be visible to your organization",
       icon: Organization24,
     },
     {
       value: "public",
-      name: "Public",
+      title: "Public",
       description: "Documents will be publicly visible to everyone",
       icon: Globe24,
     },
   ];
 
   export let name: string;
   export let selected: access = levels[0].value;
+  export let direction: "column" | "row" = "column";
 </script>
 
-<Flex direction="column" gap={0.5}>
+<Flex {direction} gap={0.5}>
   {#each levels as level}
     <div class="option" class:selected={level.value === selected}>
       <input
@@ -55,7 +56,7 @@
         <Flex gap={0.5}>
           <svelte:component this={level.icon} />
           <Flex direction="column" gap={0.125}>
-            <p class="name">{level.name}</p>
+            <p class="title">{level.title}</p>
             <p class="description">{level.description}</p>
           </Flex>
         </Flex>
@@ -66,6 +67,7 @@
 
 <style>
   .option {
+    flex: 1 1 0;
     padding: 0.5rem;
     border-radius: 0.25rem;
     border: 1px solid var(--gray-2, #d8dee2);
@@ -83,7 +85,7 @@
   .detail {
     cursor: pointer;
   }
-  .name {
+  .title {
     font-weight: var(--font-semibold);
   }
   .description {

src/lib/components/forms/InputFile.svelte → src/lib/components/inputs/File.svelte

@@ -1,3 +1,8 @@
+<!-- @component
+  The File input provides a styled wrapper around `<input type="file" />`.
+  It mimics the way our common `Button` component handles displaying children.
+-->
+
 <script lang="ts">
   import type { ComponentProps } from "svelte";
   import { DOCUMENT_TYPES } from "@/config/config.js";

src/lib/components/forms/InputSelect.svelte → src/lib/components/inputs/Select.svelte

@@ -1,5 +1,4 @@
-<!-- InputSelect.svelte
-  
+<!-- @component
   `svelte-select` provides a flexible, customizable basis for the InputSelect component.
 
   - https://github.com/rob-balfre/svelte-select

src/lib/components/forms/InputText.svelte → src/lib/components/inputs/Text.svelte

@@ -1,3 +1,7 @@
+<!-- @component
+  The Text input provides styling to the default `<input type="text" … />`.
+-->
+
 <script lang="ts">
   export let name: string = null;
   export let placeholder = "";

src/lib/components/forms/stories/AccessLevel.stories.svelte → src/lib/components/inputs/stories/AccessLevel.stories.svelte

@@ -3,7 +3,7 @@
   import AccessLevel from "../AccessLevel.svelte";
 
   export const meta = {
-    title: "Components / Documents / Access Level",
+    title: "Components / Inputs / Access Level",
     component: AccessLevel,
     tags: ["autodocs"],
     parameters: { layout: "centered" },
@@ -21,3 +21,4 @@
 <Story name="Private" {args} />
 <Story name="Organization" args={{ ...args, level: "organization" }} />
 <Story name="Public" args={{ ...args, level: "public" }} />
+<Story name="Row" args={{ ...args, direction: "row" }} />

src/lib/components/common/stories/Checkbox.stories.svelte → src/lib/components/inputs/stories/Checkbox.stories.svelte

@@ -3,7 +3,7 @@
   import Checkbox from "../Checkbox.svelte";
 
   export const meta = {
-    title: "Components / Common / Checkbox",
+    title: "Components / Inputs / Checkbox",
     component: Checkbox,
     tags: ["autodocs"],
     parameters: { layout: "centered" },

src/lib/components/forms/stories/Dropzone.stories.svelte → src/lib/components/inputs/stories/Dropzone.stories.svelte

@@ -10,7 +10,7 @@
   };
 
   export const meta = {
-    title: "Components / Forms / Dropzone",
+    title: "Components / Inputs / Dropzone",
     component: Dropzone,
     tags: ["autodocs"],
     parameters: { layout: "centered" },

src/lib/components/forms/stories/InputFile.stories.svelte → src/lib/components/inputs/stories/File.stories.svelte

@@ -1,11 +1,11 @@
 <script context="module" lang="ts">
   import { Template, Story } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
-  import InputFile from "../InputFile.svelte";
+  import File from "../File.svelte";
 
   export const meta = {
-    title: "Components / Forms / Inputs / File",
-    component: InputFile,
+    title: "Components / Inputs / File",
+    component: File,
     tags: ["autodocs"],
   };
 
@@ -17,7 +17,7 @@
 </script>
 
 <Template let:args>
-  <InputFile {...args}>Select Files</InputFile>
+  <File {...args}>Select Files</File>
 </Template>
 
 <Story name="Default" {args} />

src/lib/components/forms/stories/InputSelect.stories.svelte → src/lib/components/inputs/stories/Select.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module" lang="ts">
   import { Template, Story } from "@storybook/addon-svelte-csf";
-  import InputSelect from "../InputSelect.svelte";
+  import Select from "../Select.svelte";
 
   export const meta = {
-    title: "Components / Forms / Inputs / Select",
-    component: InputSelect,
+    title: "Components / Inputs / Select",
+    component: Select,
     tags: ["autodocs"],
   };
 
@@ -22,7 +22,7 @@
 </script>
 
 <Template let:args>
-  <InputSelect {...args} />
+  <Select {...args} />
 </Template>
 
 <Story name="Empty" {args} />

src/lib/components/common/stories/Switch.stories.svelte → src/lib/components/inputs/stories/Switch.stories.svelte

@@ -3,7 +3,7 @@
   import Switch from "../Switch.svelte";
 
   export const meta = {
-    title: "Components / Common / Inputs / Switch",
+    title: "Components / Inputs / Switch",
     component: Switch,
     tags: ["autodocs"],
     parameters: { layout: "centered" },

src/lib/components/forms/stories/InputText.stories.svelte → src/lib/components/inputs/stories/Text.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module" lang="ts">
   import { Template, Story } from "@storybook/addon-svelte-csf";
-  import InputText from "../InputText.svelte";
+  import Text from "../Text.svelte";
 
   export const meta = {
-    title: "Components / Forms / Inputs / Text",
-    component: InputText,
+    title: "Components / Inputs / Text",
+    component: Text,
     tags: ["autodocs"],
     parameters: { layout: "centered" },
   };
@@ -15,7 +15,7 @@
 </script>
 
 <Template let:args>
-  <InputText {...args} />
+  <Text {...args} />
 </Template>
 
 <Story name="Empty" {args} />