Front-end folder reorganisation and Storybook integration for all components by nole2701 · Pull Request #706 · NEU-DSG/dailp-encoding

nole2701 · 2026-04-07T13:30:11Z

Summary

Reorganised the /website directory to keep components in separate folders with their own CSS and Storybook files. The page files themselves are put into their own directory. Below is a simplified visualisation.

Added Storybook stories for every component in /src/components where having a story adds value. Skipped pure context providers and big main components that need a lot of providers and where the sub-components already have their own stories.

Infrastructure Notes

Stubbed process.env in website/.storybook/main.ts to prevent Cognito from crashing when initialising storybook.
Used the wonka library's fromValue/never functions to create urql mocks for all stories that need GraphQL
Used real database values where accessible (eg. taken directly from the website or searched for in the PostgreSQL database) so that it mimicks what the website actually looks like.
Applied themeClass to document.body in website/.storybook/preview.tsx so components that use Reakit Portals (like Sidebar) get their styling.

netlify · 2026-04-07T13:30:19Z

✅ Deploy Preview for dailp canceled.

Name	Link
🔨 Latest commit	`392c4f8`
🔍 Latest deploy log	https://app.netlify.com/projects/dailp/deploys/69e7c534f48983000800a1df

nguyen-katie

Running yarn build on a Windows laptop yields this error:

failed to load config from /home/nguyen-katie/dailp-encoding/website/vite.config.ts
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/addon-vitest' imported from /home/nguyen-katie/dailp-encoding/website/vite.config.ts.timestamp-1776722631844-afe15fdb2a7a8.mjs
    at Object.getPackageJSONURL (node:internal/modules/package_json_reader:314:9)
    at packageResolve (node:internal/modules/esm/resolve:767:81)
    at moduleResolve (node:internal/modules/esm/resolve:853:18)
    at defaultResolve (node:internal/modules/esm/resolve:983:11)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:731:20)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:708:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:310:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:182:49)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build:vite" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

nole2701 · 2026-04-21T00:56:35Z

Running yarn build on a Windows laptop yields this error:

failed to load config from /home/nguyen-katie/dailp-encoding/website/vite.config.ts
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/addon-vitest' imported from /home/nguyen-katie/dailp-encoding/website/vite.config.ts.timestamp-1776722631844-afe15fdb2a7a8.mjs
    at Object.getPackageJSONURL (node:internal/modules/package_json_reader:314:9)
    at packageResolve (node:internal/modules/esm/resolve:767:81)
    at moduleResolve (node:internal/modules/esm/resolve:853:18)
    at defaultResolve (node:internal/modules/esm/resolve:983:11)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:731:20)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:708:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:310:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:182:49)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build:vite" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

try doing cd website and yarn install

nguyen-katie · 2026-04-21T17:22:29Z

try doing cd website and yarn install

After doing cd website, yarn install, and dev-graphql:

(Also, make sure to check on the merge conflicts in the header and footer)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:302:12
    |
302 | ...Ok(query_file_as!(BasicWord, "queries/word_by_id.sql", word_id)
    |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:321:21
    |
321 |           let items = query_file_as!(
    |  _____________________^
322 | |             BasicWord,
323 | |             "queries/search_syllabary.sql",
324 | |             &alternate_spellings
325 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:336:21
    |
336 |           let items = query_file_as!(
    |  _____________________^
337 | |             BasicWord,
338 | |             "queries/connected_forms.sql",
339 | |             gloss,
340 | |             document_id.map(|id| id.0)
341 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:352:21
    |
352 |           let items = query_file!(
    |  _____________________^
353 | |             "queries/surface_forms.sql",
354 | |             morpheme_id.gloss,
355 | |             morpheme_id.document_name
356 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:427:21
    |
427 |           let words = query_file!(
    |  _____________________^
428 | |             "queries/morphemes_by_document.sql",
429 | |             gloss,
430 | |             document_id.map(|id| id.0)
431 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:679:23
    |
679 | ... = query_file_as!(BasicWord, "queries/search_words_any_field.sql", like_query)
    |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column "source_text" does not exist
   --> types/src/database_sql.rs:785:27
    |
785 |           let document_id = query_file!(
    |  ___________________________^
786 | |             "queries/update_word.sql",
787 | |             word.id,
788 | |             &source as _,
...   |
791 | |             &english_gloss as _
792 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
    --> types/src/database_sql.rs:1600:21
     |
1600 |           let words = query_file_as!(
     |  _____________________^
1601 | |             BasicWord,
1602 | |             "queries/document_words.sql",
1603 | |             document_id.0,
1604 | |             start,
1605 | |             end
1606 | |         )
     | |_________^
     |
     = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column "source_text" of relation "word" does not exist
    --> types/src/database_sql.rs:2005:19
     |
2005 |           let ids = query_file_scalar!(
     |  ___________________^
2006 | |             "queries/insert_many_words_in_document.sql",
2007 | |             &*document_id,
2008 | |             &*source_text as _,
...    |
2015 | |             &*index_in_document
2016 | |         )
     | |_________^
     |
     = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_scalar` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column "source_text" of relation "word" does not exist
    --> types/src/database_sql.rs:2102:29
     |
2102 |           let word_id: Uuid = query_file_scalar!(
     |  _____________________________^
2103 | |             "queries/upsert_word_in_document.sql",
2104 | |             form.source,
2105 | |             form.simple_phonetics,
...    |
2117 | |             audio_end
2118 | |         )
     | |_________^
     |
     = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_scalar` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
    --> types/src/database_sql.rs:3032:21
     |
3032 | ... = query_file!("queries/words_in_paragraph.sql", &keys[..])
     |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     |
     = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file` (in Nightly builds, run with -Z macro-backtrace for more info)

warning: unused import: `MaybeUndefined`
 --> types/src/auth.rs:1:28
  |
1 | use async_graphql::{Guard, MaybeUndefined};
  |                            ^^^^^^^^^^^^^^
  |
  = note: `#[warn(unused_imports)]` on by default

warning: unused import: `anyhow::Error`
 --> types/src/database_sql.rs:3:5
  |
3 | use anyhow::Error;
  |     ^^^^^^^^^^^^^

warning: unused import: `std::ptr::null`
 --> types/src/database_sql.rs:9:5
  |
9 | use std::ptr::null;
  |     ^^^^^^^^^^^^^^

warning: unused import: `warn`
  --> types/src/database_sql.rs:24:17
   |
24 | use log::{info, warn};
   |                 ^^^^

warning: unused import: `crate::document::DocumentReference`
 --> types/src/doc_metadata.rs:2:5
  |
2 | use crate::document::DocumentReference;
  |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

warning: unused import: `std::collections::HashMap`
 --> types/src/doc_metadata.rs:7:5
  |
7 | use std::collections::HashMap;
  |     ^^^^^^^^^^^^^^^^^^^^^^^^^

warning: unused import: `query_file`
  --> types/src/document.rs:22:12
   |
22 | use sqlx::{query_file, query_file_as, PgPool, Row};
   |            ^^^^^^^^^^

warning: unused import: `str::FromStr`
 --> types/src/person.rs:1:16
  |
1 | use std::{fmt, str::FromStr};
  |                ^^^^^^^^^^^^

warning: unused imports: `SimpleObject` and `Union`
 --> types/src/person.rs:4:21
  |
4 | use async_graphql::{SimpleObject, Union};
  |                     ^^^^^^^^^^^^  ^^^^^

warning: unused import: `FromRow`
 --> types/src/person.rs:6:12
  |
6 | use sqlx::{FromRow, Type};
  |            ^^^^^^^

warning: unused variable: `other`
   --> types/src/person.rs:105:13
    |
105 |             other => panic!("{} is not a valid contributor role"...
    |             ^^^^^ help: if this is intentional, prefix it with an underscore: `_other`
    |
    = note: `#[warn(unused_variables)]` on by default

warning: `dailp` (lib) generated 11 warnings
error: could not compile `dailp` (lib) due to 11 previous errors; 11 warnings emitted
warning: virtual workspace defaulting to `resolver = "1"` despite one or more workspace members being on edition 2021 which implies `resolver = "2"`
note: to keep the current resolver, specify `workspace.resolver = "1"` in the workspace root's manifest
note: to use the edition 2021 resolver, specify `workspace.resolver = "2"` in the workspace root's manifest
note: for more details see https://doc.rust-lang.org/cargo/reference/resolver.html#resolver-versions
   Compiling dailp v0.5.0 (/home/nguyen-katie/dailp-encoding/types)
error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:302:12
    |
302 | ...Ok(query_file_as!(BasicWord, "queries/word_by_id.sql", word_id)
    |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:321:21
    |
321 |           let items = query_file_as!(
    |  _____________________^
322 | |             BasicWord,
323 | |             "queries/search_syllabary.sql",
324 | |             &alternate_spellings
325 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:336:21
    |
336 |           let items = query_file_as!(
    |  _____________________^
337 | |             BasicWord,
338 | |             "queries/connected_forms.sql",
339 | |             gloss,
340 | |             document_id.map(|id| id.0)
341 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:352:21
    |
352 |           let items = query_file!(
    |  _____________________^
353 | |             "queries/surface_forms.sql",
354 | |             morpheme_id.gloss,
355 | |             morpheme_id.document_name
356 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:427:21
    |
427 |           let words = query_file!(
    |  _____________________^
428 | |             "queries/morphemes_by_document.sql",
429 | |             gloss,
430 | |             document_id.map(|id| id.0)
431 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:679:23
    |
679 | ... = query_file_as!(BasicWord, "queries/search_words_any_field.sql", like_query)
    |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column "source_text" does not exist
   --> types/src/database_sql.rs:785:27
    |
785 |           let document_id = query_file!(
    |  ___________________________^
786 | |             "queries/update_word.sql",
787 | |             word.id,
788 | |             &source as _,
...   |
791 | |             &english_gloss as _
792 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
    --> types/src/database_sql.rs:1600:21
     |
1600 |           let words = query_file_as!(
     |  _____________________^
1601 | |             BasicWord,
1602 | |             "queries/document_words.sql",
1603 | |             document_id.0,
1604 | |             start,
1605 | |             end
1606 | |         )
     | |_________^
     |
     = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column "source_text" of relation "word" does not exist
    --> types/src/database_sql.rs:2005:19
     |
2005 |           let ids = query_file_scalar!(
     |  ___________________^
2006 | |             "queries/insert_many_words_in_document.sql",
2007 | |             &*document_id,
2008 | |             &*source_text as _,
...    |
2015 | |             &*index_in_document
2016 | |         )
     | |_________^
     |
     = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_scalar` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column "source_text" of relation "word" does not exist
    --> types/src/database_sql.rs:2102:29
     |
2102 |           let word_id: Uuid = query_file_scalar!(
     |  _____________________________^
2103 | |             "queries/upsert_word_in_document.sql",
2104 | |             form.source,
2105 | |             form.simple_phonetics,
...    |
2117 | |             audio_end
2118 | |         )
     | |_________^
     |
     = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_scalar` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
    --> types/src/database_sql.rs:3032:21
     |
3032 | ... = query_file!("queries/words_in_paragraph.sql", &keys[..])
     |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     |
     = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file` (in Nightly builds, run with -Z macro-backtrace for more info)

nole2701 · 2026-04-21T17:36:08Z

try doing cd website and yarn install

After doing cd website, yarn install, and dev-graphql:

(Also, make sure to check on the merge conflicts in the header and footer)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:302:12
    |
302 | ...Ok(query_file_as!(BasicWord, "queries/word_by_id.sql", word_id)
    |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

error: error returned from database: column word.source_text does not exist
   --> types/src/database_sql.rs:321:21
    |
321 |           let items = query_file_as!(
    |  _____________________^
322 | |             BasicWord,
323 | |             "queries/search_syllabary.sql",
324 | |             &alternate_spellings
325 | |         )
    | |_________^
    |
    = note: this error originates in the macro `$crate::sqlx_macros::expand_query` which comes from the expansion of the macro `query_file_as` (in Nightly builds, run with -Z macro-backtrace for more info)

For these "column does not exist" issues clear the database with sqlx database drop then run dev-migrate-schema again.

nguyen-katie · 2026-04-21T19:26:43Z

For these "column does not exist" issues clear the database with sqlx database drop then run dev-migrate-schema again.

EDIT: Nevermind, fixed the error

nole2701 added 2 commits March 18, 2026 22:54

front end re-organisation and early storybook implementation

a3f4fc4

finished all stories for components folder

4b490ed

nole2701 requested a review from GracefulLemming April 7, 2026 13:31

nole2701 added 4 commits April 7, 2026 21:39

updating to node 24 since storybook requires it

1a86f54

trying node 22

16d6019

going back to node 18 but downgrading react-docgen

1058df4

tried fixing react-icons issue directly

ec1ee27

chullings linked an issue Apr 15, 2026 that may be closed by this pull request

Storybook Integration Test - Bookmark #674

Open

chullings requested a review from nguyen-katie April 15, 2026 19:09

nguyen-katie reviewed Apr 20, 2026

View reviewed changes

nole2701 closed this Apr 21, 2026

nole2701 reopened this Apr 21, 2026

nole2701 and others added 2 commits April 22, 2026 01:07

merged main into branch

b5a6e1b

Merge branch 'main' into storybook-integration

392c4f8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Front-end folder reorganisation and Storybook integration for all components#706

Front-end folder reorganisation and Storybook integration for all components#706
nole2701 wants to merge 8 commits into
mainfrom
storybook-integration

nole2701 commented Apr 7, 2026

Uh oh!

netlify Bot commented Apr 7, 2026 •

edited

Loading

Uh oh!

nguyen-katie left a comment

Uh oh!

nole2701 commented Apr 21, 2026

Uh oh!

nguyen-katie commented Apr 21, 2026 •

edited

Loading

Uh oh!

nole2701 commented Apr 21, 2026

Uh oh!

nguyen-katie commented Apr 21, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

nole2701 commented Apr 7, 2026

Summary

Infrastructure Notes

Uh oh!

netlify Bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for dailp canceled.

Uh oh!

nguyen-katie left a comment

Choose a reason for hiding this comment

Uh oh!

nole2701 commented Apr 21, 2026

Uh oh!

nguyen-katie commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nole2701 commented Apr 21, 2026

Uh oh!

nguyen-katie commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented Apr 7, 2026 •

edited

Loading

nguyen-katie commented Apr 21, 2026 •

edited

Loading

nguyen-katie commented Apr 21, 2026 •

edited

Loading