├── .eslintignore
├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── release.yml
├── src
    ├── shared
    │   ├── constants.ts
    │   ├── link-and-path
    │   │   ├── constants.ts
    │   │   └── link-predicates.ts
    │   ├── dragging
    │   │   ├── types.ts
    │   │   ├── utils.ts
    │   │   └── drag-context.tsx
    │   ├── uuid.ts
    │   ├── markdown
    │   │   └── constants.ts
    │   ├── logger
    │   │   ├── types.ts
    │   │   └── constants.ts
    │   ├── export
    │   │   ├── types.ts
    │   │   ├── export-utils.ts
    │   │   ├── export-to-csv.tsx
    │   │   └── export-to-markdown.tsx
    │   ├── string-utils.ts
    │   ├── loom-state
    │   │   ├── migrate
    │   │   │   ├── migrate-state.ts
    │   │   │   ├── migrate-state-11.ts
    │   │   │   ├── migrate-state-15.ts
    │   │   │   ├── migrate-state-19.ts
    │   │   │   ├── migrate-state-1.ts
    │   │   │   ├── migrate-state-0.ts
    │   │   │   ├── migrate-state-22.ts
    │   │   │   ├── migrate-state-21.ts
    │   │   │   ├── migrate-state-5.ts
    │   │   │   ├── migrate-state-16.ts
    │   │   │   ├── migrate-state-8.ts
    │   │   │   ├── migrate-state-14.ts
    │   │   │   ├── migrate-state-20.ts
    │   │   │   ├── migrate-state-10.ts
    │   │   │   ├── migrate-state-7.ts
    │   │   │   └── migrate-state-4.ts
    │   │   ├── commands
    │   │   │   ├── error
    │   │   │   │   ├── command-redo-error.ts
    │   │   │   │   ├── command-undo-error.ts
    │   │   │   │   ├── command-patch-error.ts
    │   │   │   │   └── command-arguments-error.ts
    │   │   │   ├── column-delete-command
    │   │   │   │   ├── types.ts
    │   │   │   │   ├── utils.ts
    │   │   │   │   └── index.ts
    │   │   │   ├── column-add-command
    │   │   │   │   ├── column-add-command.spec.ts
    │   │   │   │   ├── index.ts
    │   │   │   │   └── utils.ts
    │   │   │   ├── row-add-command.spec.ts
    │   │   │   ├── column-update-command.spec.ts
    │   │   │   ├── filter-delete-command.ts
    │   │   │   ├── filter-add-command.spec.ts
    │   │   │   ├── table-settings-update-command.ts
    │   │   │   ├── filter-delete-command.spec.ts
    │   │   │   ├── column-reorder-command.spec.ts
    │   │   │   ├── row-add-command.ts
    │   │   │   ├── row-reorder-command.spec.ts
    │   │   │   ├── filter-update-command.ts
    │   │   │   ├── source-update-command.ts
    │   │   │   ├── row-delete-command.spec.ts
    │   │   │   ├── cell-body-update-command.spec.ts
    │   │   │   └── tag-update-command.ts
    │   │   ├── utils
    │   │   │   └── column-utils.ts
    │   │   └── types
    │   │   │   └── index.ts
    │   ├── conversion.ts
    │   ├── error
    │   │   ├── row-not-found-error.ts
    │   │   ├── tag-not-found-error.ts
    │   │   ├── source-not-found-error.ts
    │   │   ├── column-not-found-error.ts
    │   │   └── cell-not-found-error.ts
    │   ├── spacing
    │   │   ├── types.ts
    │   │   ├── hooks.ts
    │   │   ├── styles.css
    │   │   └── index.ts
    │   ├── render
    │   │   ├── types.ts
    │   │   └── embed.ts
    │   ├── frontmatter
    │   │   ├── types.ts
    │   │   ├── utils.ts
    │   │   └── obsidian-utils.ts
    │   ├── cell-content
    │   │   ├── file-cell-content.ts
    │   │   ├── checkbox-cell-content.ts
    │   │   ├── time-content.ts
    │   │   ├── date-cell-content.ts
    │   │   ├── text-cell-content.spec.ts
    │   │   ├── source-file-content.ts
    │   │   ├── source-cell-content.ts
    │   │   ├── number-cell-content.spec.ts
    │   │   ├── time-content.spec.ts
    │   │   ├── checkbox-cell-content.spec.ts
    │   │   ├── date-cell-content.spec.ts
    │   │   ├── text-cell-content.ts
    │   │   └── number-cell-content.ts
    │   ├── match
    │   │   ├── index.spec.ts
    │   │   └── index.ts
    │   ├── event
    │   │   ├── types.ts
    │   │   └── utils.ts
    │   ├── versioning.ts
    │   ├── dom-utils.ts
    │   ├── render-embed.ts
    │   ├── last-saved-manager.ts
    │   ├── date
    │   │   ├── date-string-conversion.ts
    │   │   ├── utils.ts
    │   │   └── date-validation.ts
    │   ├── keyboard-event.ts
    │   └── hooks.ts
    ├── react
    │   ├── loom-app
    │   │   ├── tag-cell
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── header-menu
    │   │   │   ├── styles.css
    │   │   │   ├── number-format-submenu
    │   │   │   │   └── styles.css
    │   │   │   ├── types.ts
    │   │   │   ├── time-format-submenu.tsx
    │   │   │   ├── padding-submenu.tsx
    │   │   │   ├── aspect-ratio-submenu.tsx
    │   │   │   ├── date-format-submenu.tsx
    │   │   │   ├── date-format-separator-submenu.tsx
    │   │   │   ├── text-input-submenu.tsx
    │   │   │   ├── multitag-sort-dir-submenu.tsx
    │   │   │   ├── type-submenu.tsx
    │   │   │   └── frontmatter-key-submenu.tsx
    │   │   ├── option-bar
    │   │   │   ├── sources-menu
    │   │   │   │   ├── constants.ts
    │   │   │   │   ├── base-content
    │   │   │   │   │   └── styles.css
    │   │   │   │   ├── add-source-submenu
    │   │   │   │   │   ├── types.ts
    │   │   │   │   │   └── folder-source-options.tsx
    │   │   │   │   ├── source-item
    │   │   │   │   │   ├── styles.css
    │   │   │   │   │   └── index.tsx
    │   │   │   │   └── folder-source-item
    │   │   │   │   │   └── index.tsx
    │   │   │   ├── search-bar
    │   │   │   │   ├── styles.css
    │   │   │   │   └── index.tsx
    │   │   │   ├── more-menu
    │   │   │   │   ├── constants.ts
    │   │   │   │   ├── settings-submenu.tsx
    │   │   │   │   └── toggle-column-submenu.tsx
    │   │   │   ├── styles.css
    │   │   │   ├── filter-menu
    │   │   │   │   ├── filter-column-select
    │   │   │   │   │   ├── styles.css
    │   │   │   │   │   └── index.tsx
    │   │   │   │   ├── filter-row
    │   │   │   │   │   └── styles.css
    │   │   │   │   ├── filter-operator
    │   │   │   │   │   └── index.tsx
    │   │   │   │   └── filter-condition-select.tsx
    │   │   │   ├── active-filter-bubble
    │   │   │   │   └── index.tsx
    │   │   │   ├── sort-bubble-list.tsx
    │   │   │   └── sort-bubble
    │   │   │   │   └── index.tsx
    │   │   ├── date-cell
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── file-cell
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── number-cell
    │   │   │   ├── styles.css
    │   │   │   ├── utils.ts
    │   │   │   └── index.tsx
    │   │   ├── date-cell-edit
    │   │   │   ├── styles.css
    │   │   │   ├── time-format.menu.tsx
    │   │   │   ├── date-format-menu.tsx
    │   │   │   └── date-format-separator-menu.tsx
    │   │   ├── app
    │   │   │   ├── hooks
    │   │   │   │   ├── use-row
    │   │   │   │   │   └── types.ts
    │   │   │   │   ├── use-source
    │   │   │   │   │   └── types.ts
    │   │   │   │   ├── use-cell
    │   │   │   │   │   ├── types.ts
    │   │   │   │   │   └── index.ts
    │   │   │   │   ├── use-column
    │   │   │   │   │   └── types.ts
    │   │   │   │   ├── use-app-events
    │   │   │   │   │   └── index.tsx
    │   │   │   │   ├── use-tag
    │   │   │   │   │   └── types.ts
    │   │   │   │   ├── use-table-settings.ts
    │   │   │   │   ├── use-row-events.ts
    │   │   │   │   └── use-filter.ts
    │   │   │   └── filter-by-filters
    │   │   │   │   └── evaluate-with-precedence.ts
    │   │   ├── source-file-cell
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── multi-tag-cell
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── new-column-button
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── checkbox-cell
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── tag-color-menu
    │   │   │   ├── styles.css
    │   │   │   └── components
    │   │   │   │   └── color-item
    │   │   │   │       └── styles.css
    │   │   ├── text-cell-edit
    │   │   │   ├── constants.ts
    │   │   │   ├── styles.css
    │   │   │   └── suggest-menu.tsx
    │   │   ├── row-options
    │   │   │   ├── styles.css
    │   │   │   └── row-menu
    │   │   │   │   └── index.tsx
    │   │   ├── tag-cell-edit
    │   │   │   ├── menu-header
    │   │   │   │   └── styles.css
    │   │   │   ├── menu-body
    │   │   │   │   └── styles.css
    │   │   │   ├── selectable-tag
    │   │   │   │   └── styles.css
    │   │   │   └── create-tag
    │   │   │   │   └── index.tsx
    │   │   ├── embed-cell
    │   │   │   ├── styles.css
    │   │   │   ├── index.tsx
    │   │   │   └── embed
    │   │   │   │   └── index.tsx
    │   │   ├── creation-time-cell
    │   │   │   └── index.tsx
    │   │   ├── last-edited-time-cell
    │   │   │   └── index.tsx
    │   │   ├── disabled-cell
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── footer-cell-container
    │   │   │   ├── styles.css
    │   │   │   ├── utils.ts
    │   │   │   └── arithmetic.ts
    │   │   ├── bottom-bar
    │   │   │   └── styles.css
    │   │   ├── new-row-button
    │   │   │   └── index.tsx
    │   │   ├── embed-cell-edit
    │   │   │   ├── internal-embed-suggest.tsx
    │   │   │   └── external-embed-input.tsx
    │   │   ├── text-cell
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── body-cell-container
    │   │   │   └── styles.css
    │   │   ├── header-cell-container
    │   │   │   ├── styles.css
    │   │   │   └── column-resize
    │   │   │   │   └── styles.css
    │   │   ├── source-cell
    │   │   │   └── index.tsx
    │   │   ├── table
    │   │   │   ├── footer-cell.tsx
    │   │   │   ├── body-cell.tsx
    │   │   │   └── hooks.tsx
    │   │   ├── app-mount-provider
    │   │   │   └── index.tsx
    │   │   └── file-cell-edit
    │   │   │   └── index.tsx
    │   ├── shared
    │   │   ├── divider
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── stack
    │   │   │   └── styles.css
    │   │   ├── flex
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── wrap
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── suggest-list
    │   │   │   ├── suggest-input
    │   │   │   │   ├── styles.css
    │   │   │   │   └── index.tsx
    │   │   │   ├── styles.css
    │   │   │   ├── suggest-item
    │   │   │   │   └── styles.css
    │   │   │   ├── clear-button.tsx
    │   │   │   └── create-button.tsx
    │   │   ├── button
    │   │   │   └── types.ts
    │   │   ├── stepper
    │   │   │   ├── step-spacer.tsx
    │   │   │   ├── types.ts
    │   │   │   ├── step-separator.tsx
    │   │   │   ├── step-content.tsx
    │   │   │   ├── step-text.tsx
    │   │   │   ├── step-indicator.tsx
    │   │   │   ├── step-buttons.tsx
    │   │   │   ├── step-header.tsx
    │   │   │   └── styles.css
    │   │   ├── multi-select
    │   │   │   ├── types.ts
    │   │   │   ├── styles.css
    │   │   │   └── multi-select-option.tsx
    │   │   ├── spinner
    │   │   │   ├── index.tsx
    │   │   │   └── styles.css
    │   │   ├── base-menu
    │   │   │   └── styles.css
    │   │   ├── menu-item
    │   │   │   └── styles.css
    │   │   ├── select
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── tag
    │   │   │   └── styles.css
    │   │   ├── error-boundary
    │   │   │   └── styles.css
    │   │   ├── menu
    │   │   │   └── types.ts
    │   │   ├── error-display
    │   │   │   └── styles.css
    │   │   ├── menu-provider
    │   │   │   ├── utils.ts
    │   │   │   ├── types.ts
    │   │   │   └── factory.ts
    │   │   ├── icon
    │   │   │   └── styles.css
    │   │   ├── text
    │   │   │   └── styles.css
    │   │   ├── bubble
    │   │   │   ├── styles.css
    │   │   │   └── index.tsx
    │   │   ├── checkbox-filter-select
    │   │   │   └── index.tsx
    │   │   ├── date-filter-select
    │   │   │   └── index.tsx
    │   │   ├── modal-mount-provider
    │   │   │   └── index.tsx
    │   │   ├── submenu
    │   │   │   └── index.tsx
    │   │   ├── switch
    │   │   │   ├── index.tsx
    │   │   │   └── styles.css
    │   │   ├── model-menu
    │   │   │   └── index.tsx
    │   │   ├── input
    │   │   │   └── styles.css
    │   │   └── menu-button
    │   │   │   └── index.tsx
    │   ├── import-app
    │   │   ├── constants.ts
    │   │   ├── upload-data
    │   │   │   ├── file-input
    │   │   │   │   └── styles.css
    │   │   │   ├── upload-textarea.tsx
    │   │   │   └── index.tsx
    │   │   ├── styles.css
    │   │   ├── utils.ts
    │   │   ├── match-columns
    │   │   │   ├── body-cell.tsx
    │   │   │   ├── styles.css
    │   │   │   └── bulk-options-menu.tsx
    │   │   ├── types.ts
    │   │   ├── data-type-select.tsx
    │   │   └── data-source-select.tsx
    │   ├── export-app
    │   │   ├── content-textarea.tsx
    │   │   ├── styles.css
    │   │   └── export-type-select.tsx
    │   └── global.css
    ├── obsidian
    │   ├── utils.ts
    │   ├── modal
    │   │   ├── whats-new-modal
    │   │   │   └── styles.css
    │   │   ├── welcome-modal
    │   │   │   └── styles.css
    │   │   └── export-modal.tsx
    │   ├── shared
    │   │   ├── styles.css
    │   │   └── index.ts
    │   └── editing-view-plugin.tsx
    ├── redux
    │   ├── hooks.ts
    │   ├── store.ts
    │   └── global-slice.ts
    └── data
    │   ├── network.ts
    │   ├── constants.ts
    │   ├── date-utils.ts
    │   └── deserialization-error.ts
├── bun.lockb
├── readme
    ├── app.png
    └── cover.png
├── babel.config.js
├── .editorconfig
├── __mocks__
    └── obsidian.ts
├── scripts
    └── sync-mobile.sh
├── manifest.json
├── .eslintrc.cjs
├── .gitignore
├── tsconfig.json
└── LICENSE


/.eslintignore:
--------------------------------------------------------------------------------
1 | npm node_modules
2 | dist


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: https://ko-fi.com/decaf_dev
2 | 


--------------------------------------------------------------------------------
/src/shared/constants.ts:
--------------------------------------------------------------------------------
1 | export const MIN_COLUMN_WIDTH = 40;
2 | 


--------------------------------------------------------------------------------
/src/react/loom-app/tag-cell/styles.css:
--------------------------------------------------------------------------------
1 | ._tag-cell {
2 |     width: 100%;
3 | }


--------------------------------------------------------------------------------
/src/react/shared/divider/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-hr {
2 |     margin: 0;
3 | }


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/decaf-dev/obsidian-dataloom/HEAD/bun.lockb


--------------------------------------------------------------------------------
/src/react/import-app/constants.ts:
--------------------------------------------------------------------------------
1 | export const NEW_COLUMN_ID = "new-column";
2 | 


--------------------------------------------------------------------------------
/src/react/shared/stack/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-stack {
2 |     display: flex;
3 | }


--------------------------------------------------------------------------------
/src/shared/link-and-path/constants.ts:
--------------------------------------------------------------------------------
1 | export const MARKDOWN_EXTENSION = "md";
2 | 


--------------------------------------------------------------------------------
/readme/app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/decaf-dev/obsidian-dataloom/HEAD/readme/app.png


--------------------------------------------------------------------------------
/readme/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/decaf-dev/obsidian-dataloom/HEAD/readme/cover.png


--------------------------------------------------------------------------------
/src/react/shared/flex/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-flex {
2 |     display: flex;
3 |     width: 100%;
4 | }


--------------------------------------------------------------------------------
/src/react/shared/wrap/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-wrap {
2 |     display: flex;
3 |     flex-wrap: wrap;
4 | }


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-header-menu {
2 |     color: var(--text-normal);
3 | }


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sources-menu/constants.ts:
--------------------------------------------------------------------------------
1 | export enum SourcesMenuSubmenu {
2 | 	ADD,
3 | }
4 | 


--------------------------------------------------------------------------------
/src/react/loom-app/date-cell/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-date-cell {
2 |     width: 100%;
3 |     text-align: left;
4 | }


--------------------------------------------------------------------------------
/src/react/loom-app/file-cell/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-file-cell p {
2 |     margin: 0;
3 |     text-align: left;
4 | }


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/search-bar/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-search-bar input {
2 |     max-width: 200px;
3 | }


--------------------------------------------------------------------------------
/src/shared/dragging/types.ts:
--------------------------------------------------------------------------------
1 | export interface DragData {
2 | 	type: "row" | "column";
3 | 	id: string;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/shared/uuid.ts:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from "uuid";
2 | 
3 | export const generateUuid = () => uuidv4();
4 | 


--------------------------------------------------------------------------------
/src/react/loom-app/number-cell/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-number-cell {
2 |     width: 100%;
3 |     text-align: right;
4 | }


--------------------------------------------------------------------------------
/src/react/loom-app/date-cell-edit/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-date-cell-edit input[type="text"] {
2 | 	width: 105px;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sources-menu/base-content/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-source-container {
2 |     width: 100%;
3 | }


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-row/types.ts:
--------------------------------------------------------------------------------
1 | export type RowReorderHandler = (dragId: string, targetId: string) => void;
2 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/more-menu/constants.ts:
--------------------------------------------------------------------------------
1 | export enum MoreMenuSubmenu {
2 | 	SETTINGS,
3 | 	TOGGLE_COLUMNS,
4 | }
5 | 


--------------------------------------------------------------------------------
/src/react/loom-app/source-file-cell/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-source-file-cell p {
2 |     margin: 0;
3 |     text-align: left;
4 | }


--------------------------------------------------------------------------------
/src/react/loom-app/multi-tag-cell/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-multi-tag-cell {
2 |     display: flex;
3 |     flex-direction: column;
4 | }


--------------------------------------------------------------------------------
/src/shared/markdown/constants.ts:
--------------------------------------------------------------------------------
1 | export const CHECKBOX_MARKDOWN_UNCHECKED = "[ ]";
2 | export const CHECKBOX_MARKDOWN_CHECKED = "[x]";
3 | 


--------------------------------------------------------------------------------
/src/react/shared/suggest-list/suggest-input/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-suggest-input {
2 |     background-color: var(--background-secondary);
3 | }


--------------------------------------------------------------------------------
/src/shared/logger/types.ts:
--------------------------------------------------------------------------------
1 | export interface FormattedLogMessage {
2 | 	message: string;
3 | 	data: Record<string, unknown> | null;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/react/loom-app/new-column-button/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-new-column {
2 |     padding-left: var(--dataloom-spacing--md);
3 |     width: 50px;
4 | }


--------------------------------------------------------------------------------
/src/react/shared/button/types.ts:
--------------------------------------------------------------------------------
1 | export type ButtonVariant = "default" | "link" | "text";
2 | 
3 | export type ButtonSize = "sm" | "md" | "lg";
4 | 


--------------------------------------------------------------------------------
/src/react/shared/stepper/step-spacer.tsx:
--------------------------------------------------------------------------------
1 | export default function StepSpacer() {
2 | 	return <div className="dataloom-step__spacer"></div>;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/shared/export/types.ts:
--------------------------------------------------------------------------------
1 | export enum ExportType {
2 | 	UNSELECTED = "Select an option",
3 | 	CSV = "CSV",
4 | 	MARKDOWN = "Markdown",
5 | }
6 | 


--------------------------------------------------------------------------------
/src/shared/string-utils.ts:
--------------------------------------------------------------------------------
1 | export const uppercaseFirst = (input: string) => {
2 | 	return input.charAt(0).toUpperCase() + input.slice(1);
3 | };
4 | 


--------------------------------------------------------------------------------
/src/obsidian/utils.ts:
--------------------------------------------------------------------------------
1 | import { generateUuid } from "src/shared/uuid";
2 | 
3 | export const createAppId = () => {
4 | 	return "a" + generateUuid();
5 | };
6 | 


--------------------------------------------------------------------------------
/src/react/import-app/upload-data/file-input/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-file-input input[type='file'] {
2 |     color: transparent; /* Hide the native title */
3 | }


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sources-menu/add-source-submenu/types.ts:
--------------------------------------------------------------------------------
1 | export interface AddSourceError {
2 | 	message: string;
3 | 	inputId: string;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-option-bar {
2 |     width: 100%;
3 |     border-bottom: 1px solid var(--background-modifier-border);
4 | }


--------------------------------------------------------------------------------
/src/react/shared/multi-select/types.ts:
--------------------------------------------------------------------------------
1 | export type MultiSelectOptionType = {
2 | 	id: string;
3 | 	name: string;
4 | 	component: React.ReactNode;
5 | };
6 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state.ts:
--------------------------------------------------------------------------------
1 | export default abstract class MigrateState {
2 | 	public abstract migrate(prevState: unknown): unknown;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/react/loom-app/checkbox-cell/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-checkbox-cell {
2 |     width: 100%;
3 | }
4 | 
5 | .datlaoom-checkbox-cell input {
6 |     cursor: pointer;
7 | }


--------------------------------------------------------------------------------
/src/react/shared/spinner/index.tsx:
--------------------------------------------------------------------------------
1 | import "./styles.css";
2 | 
3 | export default function Spinner() {
4 | 	return <div className="dataloom-spinner"></div>;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-source/types.ts:
--------------------------------------------------------------------------------
1 | import { Source } from "src/shared/loom-state/types/loom-state";
2 | 
3 | export type SourceAddHandler = (source: Source) => void;
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	presets: [
3 | 		["@babel/preset-react", { runtime: "automatic" }],
4 | 		"@babel/preset-env",
5 | 		"@babel/preset-typescript",
6 | 	],
7 | };
8 | 


--------------------------------------------------------------------------------
/src/react/loom-app/tag-color-menu/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-tag-color-menu__color-container {
2 |     width: 100%;
3 |     height: 215px;
4 |     overflow-y: scroll;
5 |     overflow-x: auto;
6 | }


--------------------------------------------------------------------------------
/src/react/loom-app/text-cell-edit/constants.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Matches double brackets and captures the text inside
3 |  */
4 | export const DOUBLE_BRACKET_REGEX = new RegExp(/\[\[(.*?)]]/g);
5 | 


--------------------------------------------------------------------------------
/src/react/shared/suggest-list/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-suggest-menu {
2 |     width: 100%;
3 | }
4 | 
5 | .dataloom-suggest-menu__container {
6 |     max-height: 175px;
7 |     overflow-y: auto;
8 | }


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/number-format-submenu/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-number-format-submenu {
2 |     width: 100%;
3 |     height: 240px;
4 |     overflow-x: auto;
5 |     overflow-y: scroll;
6 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # top-most EditorConfig file
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | insert_final_newline = true
 7 | indent_style = tab
 8 | indent_size = 4
 9 | tab_width = 4
10 | 


--------------------------------------------------------------------------------
/src/react/loom-app/row-options/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-row-options {
2 |     height: 100%;
3 |     width: 100%;
4 | }
5 | 
6 | .dataloom-row-options__container {
7 |     width: 100%;
8 |     height: 100%;
9 | }


--------------------------------------------------------------------------------
/src/react/export-app/content-textarea.tsx:
--------------------------------------------------------------------------------
1 | interface Props {
2 | 	value: string;
3 | }
4 | 
5 | export default function ContentTextArea({ value }: Props) {
6 | 	return <textarea readOnly value={value} />;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/react/loom-app/number-cell/utils.ts:
--------------------------------------------------------------------------------
1 | export const addThousandsSeparator = (num: string, separator: string) => {
2 | 	const regex = /\B(?=(\d{3})+(?!\d))/g;
3 | 	return num.replace(regex, separator);
4 | };
5 | 


--------------------------------------------------------------------------------
/src/react/shared/base-menu/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-menu {
2 |     position: absolute;
3 |     z-index: var(--layer-menu);
4 |     background-color: var(--background-primary);
5 |     font-weight: 400;
6 | }
7 | 
8 | 


--------------------------------------------------------------------------------
/src/react/shared/menu-item/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-menu-item {
2 |     display: flex;
3 |     align-items: center;
4 |     padding: var(--dataloom-spacing--sm) var(--dataloom-spacing--lg);
5 |     width: 100%;
6 | }


--------------------------------------------------------------------------------
/src/react/loom-app/tag-cell-edit/menu-header/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-tag-cell-edit__menu-header {
2 |     background-color: var(--background-secondary);
3 |     border-bottom: 1px solid var(--table-border-color);
4 | }


--------------------------------------------------------------------------------
/src/shared/conversion.ts:
--------------------------------------------------------------------------------
1 | export const pxToNum = (value: string) => {
2 | 	return parseFloat(value.split("px")[0]);
3 | };
4 | 
5 | export const numToPx = (value: number | string) => {
6 | 	return `${value}px`;
7 | };
8 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/filter-menu/filter-column-select/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-filter-column-select {
2 |     max-width: 175px;
3 |     white-space: nowrap;
4 |     overflow: hidden;
5 |     text-overflow: ellipsis;
6 | }


--------------------------------------------------------------------------------
/src/shared/error/row-not-found-error.ts:
--------------------------------------------------------------------------------
1 | export default class RowNotFoundError extends Error {
2 | 	constructor(id?: string) {
3 | 		super(`Cannot find row with id: ${id}`);
4 | 		this.name = "RowNotFoundError";
5 | 	}
6 | }
7 | 


--------------------------------------------------------------------------------
/src/shared/error/tag-not-found-error.ts:
--------------------------------------------------------------------------------
1 | export default class TagNotFoundError extends Error {
2 | 	constructor(id: string) {
3 | 		super(`Cannot find tag with id: ${id}`);
4 | 		this.name = "TagNotFoundError";
5 | 	}
6 | }
7 | 


--------------------------------------------------------------------------------
/src/react/loom-app/embed-cell/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-embed-cell {
 2 |     width: 100%;
 3 |     height: 100%;
 4 |     overflow: hidden;
 5 | }
 6 | 
 7 | .dataloom-embed-cell p {
 8 | 	margin: 0;
 9 | 	text-align: left;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/react/loom-app/tag-cell-edit/menu-body/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-tag-cell-edit__menu-body {
2 |     max-height: 140px;
3 |     overflow-y: scroll;
4 | }
5 | 
6 | .dataloom-tag-cell-edit__menu-body-container {
7 |     width: 100%;
8 | }


--------------------------------------------------------------------------------
/src/react/loom-app/tag-color-menu/components/color-item/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-color-item {
2 |     width: 100%;
3 | }
4 | 
5 | .dataloom-color-item__square {
6 |     width: 15px;
7 |     height: 15px;
8 |     border-radius: 4px;
9 | }


--------------------------------------------------------------------------------
/src/react/shared/select/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-select:focus {
2 |     box-shadow: none;
3 | }
4 | 
5 | .dataloom-select--error {
6 |     outline: 2px solid var(--background-modifier-error) !important;
7 |     outline-offset: -2px;
8 | }


--------------------------------------------------------------------------------
/src/shared/export/export-utils.ts:
--------------------------------------------------------------------------------
1 | export const escapePipeCharacters = (value: string) =>
2 | 	value.replace(/\|/g, "\\|");
3 | 
4 | export const replaceNewLinesWithBreaks = (value: string) =>
5 | 	value.replace(/\n/g, "<br>");
6 | 


--------------------------------------------------------------------------------
/src/shared/error/source-not-found-error.ts:
--------------------------------------------------------------------------------
1 | export default class SourceNotFoundError extends Error {
2 | 	constructor(id: string) {
3 | 		super(`Cannot find source with id: ${id}`);
4 | 		this.name = "SourceNotFoundError";
5 | 	}
6 | }
7 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-cell/types.ts:
--------------------------------------------------------------------------------
1 | import { Cell } from "src/shared/loom-state/types/loom-state";
2 | 
3 | export type CellChangeHandler = (
4 | 	id: string,
5 | 	data: Partial<Cell>,
6 | 	isPartial?: boolean
7 | ) => void;
8 | 


--------------------------------------------------------------------------------
/src/react/loom-app/creation-time-cell/index.tsx:
--------------------------------------------------------------------------------
1 | interface Props {
2 | 	value: string;
3 | }
4 | 
5 | export default function CreationTimeCell({ value }: Props) {
6 | 	return <div className="dataloom-creation-time-cell">{value}</div>;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/react/shared/stepper/types.ts:
--------------------------------------------------------------------------------
1 | export type Step = {
2 | 	title: string;
3 | 	description?: string;
4 | 	content: React.ReactNode;
5 | 	canContinue?: (() => boolean) | boolean;
6 | 	onBack?: () => void;
7 | 	onContinue?: () => boolean;
8 | };
9 | 


--------------------------------------------------------------------------------
/src/react/loom-app/last-edited-time-cell/index.tsx:
--------------------------------------------------------------------------------
1 | interface Props {
2 | 	value: string;
3 | }
4 | 
5 | export default function LastEditedTimeCell({ value }: Props) {
6 | 	return <div className="dataloom-last-edited-time-cell">{value}</div>;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/error/command-redo-error.ts:
--------------------------------------------------------------------------------
1 | export default class CommandRedoError extends Error {
2 | 	constructor() {
3 | 		super(`undo() must be called before redo() is available`);
4 | 		this.name = "CommandRedoError";
5 | 	}
6 | }
7 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/error/command-undo-error.ts:
--------------------------------------------------------------------------------
1 | export default class CommandUndoError extends Error {
2 | 	constructor() {
3 | 		super(`execute() must be called before undo() is available`);
4 | 		this.name = "CommandUndoError";
5 | 	}
6 | }
7 | 


--------------------------------------------------------------------------------
/src/shared/spacing/types.ts:
--------------------------------------------------------------------------------
 1 | export interface DynamicSize<T> {
 2 | 	base: T;
 3 | 	mobile?: T;
 4 | }
 5 | 
 6 | export type SpacingSize =
 7 | 	| "sm"
 8 | 	| "md"
 9 | 	| "lg"
10 | 	| "xl"
11 | 	| "2xl"
12 | 	| "3xl"
13 | 	| "4xl"
14 | 	| "unset";
15 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/error/command-patch-error.ts:
--------------------------------------------------------------------------------
1 | export default class CommandPatchError extends Error {
2 | 	constructor() {
3 | 		super("patch must be set before undo() or redo() are available");
4 | 		this.name = "CommandPatchError";
5 | 	}
6 | }
7 | 


--------------------------------------------------------------------------------
/__mocks__/obsidian.ts:
--------------------------------------------------------------------------------
1 | // Jest will use this file instead of the real obsidian module when running tests.
2 | // This is useful because the real obsidian module is not available in the test environment.
3 | 
4 | export const App = {};
5 | 
6 | export class TFile {}
7 | 


--------------------------------------------------------------------------------
/src/react/loom-app/date-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | 
 3 | interface Props {
 4 | 	content: string;
 5 | }
 6 | 
 7 | export default function DateCell({ content }: Props) {
 8 | 	return <div className="dataloom-date-cell">{content}</div>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/react/loom-app/disabled-cell/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-disabled-cell {
2 | 	width: 100%;
3 | 	height: 100%;
4 | 	background-color: var(--background-secondary);
5 | 	cursor: default;
6 | 	padding: var(--dataloom-cell-spacing-x) var(--dataloom-cell-spacing-y);
7 | }
8 | 


--------------------------------------------------------------------------------
/src/react/loom-app/number-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | 
 3 | interface Props {
 4 | 	content: string;
 5 | }
 6 | 
 7 | export default function NumberCell({ content }: Props) {
 8 | 	return <div className="dataloom-number-cell">{content}</div>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/react/shared/tag/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-tag {
2 |     display: flex;
3 |     align-items: center;
4 |     border-radius: 8px;
5 |     padding: var(--dataloom-spacing--xs) var(--dataloom-spacing--md);
6 |     width: max-content;
7 |     color: var(--text-normal);
8 | }


--------------------------------------------------------------------------------
/src/react/import-app/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-import-app {
 2 |     overflow-x: hidden;
 3 |     overflow-y: scroll;
 4 |     max-height: calc(100vh - 20em);
 5 | }
 6 | 
 7 | .dataloom-import-app textarea {
 8 |     width: 100%;
 9 |     height: 10em;
10 |     resize: none;
11 | }


--------------------------------------------------------------------------------
/src/react/loom-app/footer-cell-container/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-cell--footer__container {
2 |     display: flex;
3 |     justify-content: flex-end;
4 |     cursor: pointer;
5 |     overflow: hidden;
6 |     padding: var(--dataloom-cell-spacing-x) var(--dataloom-cell-spacing-y);
7 | }


--------------------------------------------------------------------------------
/src/react/loom-app/tag-cell-edit/selectable-tag/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-selectable-tag {
2 |     display: flex;
3 |     justify-content: space-between;
4 |     align-items: center;
5 |     padding: var(--dataloom-spacing--sm) var(--dataloom-spacing--md);
6 |     overflow: hidden;
7 | }


--------------------------------------------------------------------------------
/src/shared/logger/constants.ts:
--------------------------------------------------------------------------------
1 | export const LOG_LEVEL_OFF = "off";
2 | export const LOG_LEVEL_ERROR = "error";
3 | export const LOG_LEVEL_WARN = "warn";
4 | export const LOG_LEVEL_INFO = "info";
5 | export const LOG_LEVEL_DEBUG = "debug";
6 | export const LOG_LEVEL_TRACE = "trace";
7 | 
8 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sources-menu/source-item/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-source-item {
 2 |     width: 100%;
 3 |     height: 2.2em;
 4 | }
 5 | 
 6 | .dataloom-source-item input {
 7 |      width: 150px;
 8 | }
 9 | 
10 | .dataloom-source-item select {
11 |    max-width: 150px;
12 |  }
13 | 


--------------------------------------------------------------------------------
/src/obsidian/modal/whats-new-modal/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-whats-new-modal__spacer {
 2 | 	height: 10px;
 3 | }
 4 | 
 5 | .dataloom-whats-new-modal__badge-container {
 6 | 	margin: 20px 0px;
 7 | }
 8 | 
 9 | .dataloom-whats-new-modal__content strong {
10 | 	font-size: var(--font-ui-large);
11 | }
12 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sources-menu/source-item/index.tsx:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | 
 3 | interface Props {
 4 | 	children: React.ReactNode;
 5 | }
 6 | 
 7 | export default function SourceItem({ children }: Props) {
 8 | 	return <div className="dataloom-source-item">{children}</div>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/shared/render/types.ts:
--------------------------------------------------------------------------------
 1 | export type JustifyContent =
 2 | 	| "flex-start"
 3 | 	| "center"
 4 | 	| "space-between"
 5 | 	| "flex-end";
 6 | 
 7 | export type AlignItems = "flex-start" | "center" | "flex-end";
 8 | 
 9 | export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
10 | 


--------------------------------------------------------------------------------
/src/react/import-app/utils.ts:
--------------------------------------------------------------------------------
 1 | import { DataType } from "./types";
 2 | 
 3 | export const getAcceptForDataType = (value: DataType) => {
 4 | 	switch (value) {
 5 | 		case DataType.MARKDOWN:
 6 | 			return ".md";
 7 | 		case DataType.CSV:
 8 | 			return ".csv";
 9 | 		default:
10 | 			return "";
11 | 	}
12 | };
13 | 


--------------------------------------------------------------------------------
/src/react/shared/error-boundary/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-error-boundary {
 2 |     background-color: var(--background-secondary);
 3 |     overflow: scroll;
 4 | }
 5 | 
 6 | .dataloom-error-boundary__message {
 7 |     width: 100%;
 8 |     max-height: 150px;
 9 |     overflow: scroll;
10 |     text-align: left;
11 | }


--------------------------------------------------------------------------------
/src/react/shared/menu/types.ts:
--------------------------------------------------------------------------------
 1 | export interface LoomMenuPosition {
 2 | 	top: number;
 3 | 	left: number;
 4 | 	width: number;
 5 | 	height: number;
 6 | }
 7 | 
 8 | export type LoomMenuOpenDirection =
 9 | 	| "normal"
10 | 	| "bottom-left"
11 | 	| "bottom-right"
12 | 	| "bottom"
13 | 	| "left"
14 | 	| "right";
15 | 


--------------------------------------------------------------------------------
/src/react/shared/suggest-list/suggest-item/styles.css:
--------------------------------------------------------------------------------
1 | .dataloom-suggest-item {
2 |     padding: var(--dataloom-spacing--sm) var(--dataloom-spacing--lg);
3 |     margin: 2px 0;                        
4 | }
5 | 
6 | .dataloom-suggest-item:hover {
7 |     background-color: var(--background-modifier-hover) !important;
8 | }


--------------------------------------------------------------------------------
/src/obsidian/shared/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-modal__divider {
 2 |     margin: 1.5em 0;
 3 | }
 4 | 
 5 | .dataloom-modal__divider--first-child {
 6 |     margin-top: 0;
 7 | }
 8 | 
 9 | .dataloom-modal-text--emphasize {
10 |     color: var(--text-accent);
11 | }
12 | 
13 | .dataloom-modal__title {
14 |     margin-bottom: 0;
15 | }


--------------------------------------------------------------------------------
/src/react/import-app/upload-data/upload-textarea.tsx:
--------------------------------------------------------------------------------
 1 | interface Props {
 2 | 	value: string;
 3 | 	onChange: (value: string) => void;
 4 | }
 5 | 
 6 | export default function UploadTextarea({ value, onChange }: Props) {
 7 | 	return (
 8 | 		<textarea value={value} onChange={(e) => onChange(e.target.value)} />
 9 | 	);
10 | }
11 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/filter-menu/filter-row/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-filter-row {
 2 |     width: 100%;
 3 | }
 4 | 
 5 | .dataloom-filter-row__input input {
 6 |     width: 150px;
 7 | }
 8 | 
 9 | .dataloom-filter-row select {
10 |    max-width: 175px;
11 | }
12 | 
13 | .dataloom-filter-row__spacer {
14 |     width: 60px;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/redux/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from "react-redux";
2 | import type { TypedUseSelectorHook } from "react-redux";
3 | import type { RootState, AppDispatch } from "./store";
4 | 
5 | export const useAppDispatch: () => AppDispatch = useDispatch;
6 | export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
7 | 


--------------------------------------------------------------------------------
/src/react/loom-app/bottom-bar/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-bottom-bar {
 2 |     position: relative;
 3 |     height: 60px;
 4 | }
 5 | 
 6 | .dataloom-bottom-bar--mobile {
 7 | 	height: 100px;
 8 | }
 9 | 
10 | .dataloom-bottom-bar > div {
11 |     border-top: 1px solid var(--table-border-color);
12 |     position: absolute;
13 |     width: 100%;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/redux/store.ts:
--------------------------------------------------------------------------------
 1 | import { configureStore } from "@reduxjs/toolkit";
 2 | import globalSlice from "./global-slice";
 3 | 
 4 | export const store = configureStore({
 5 | 	reducer: {
 6 | 		global: globalSlice,
 7 | 	},
 8 | });
 9 | 
10 | export type RootState = ReturnType<typeof store.getState>;
11 | export type AppDispatch = typeof store.dispatch;
12 | 


--------------------------------------------------------------------------------
/scripts/sync-mobile.sh:
--------------------------------------------------------------------------------
1 | adb shell mkdir -p /sdcard/Documents/obsidian_vault/.obsidian/plugins/dataloom
2 | adb push ../main.js /sdcard/Documents/obsidian_vault/.obsidian/plugins/dataloom/
3 | adb push ../styles.css /sdcard/Documents/obsidian_vault/.obsidian/plugins/dataloom/
4 | adb push ../manifest.json /sdcard/Documents/obsidian_vault/.obsidian/plugins/dataloom/


--------------------------------------------------------------------------------
/src/react/shared/error-display/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-error {
 2 |     background-color: var(--background-secondary);
 3 |     overflow: scroll;
 4 | }
 5 | 
 6 | .dataloom-error--embedded-app {
 7 |     height: 100%;
 8 | }
 9 | 
10 | .dataloom-error__message {
11 |     width: 100%;
12 |     max-height: 150px;
13 |     overflow: scroll;
14 |     text-align: left;
15 | }


--------------------------------------------------------------------------------
/src/react/shared/stepper/step-separator.tsx:
--------------------------------------------------------------------------------
 1 | interface Props {
 2 | 	hideBorder: boolean;
 3 | }
 4 | 
 5 | export default function StepSeparator({ hideBorder }: Props) {
 6 | 	let className = "dataloom-step__separator";
 7 | 	if (hideBorder) {
 8 | 		className += " dataloom-step__separator--no-border";
 9 | 	}
10 | 	return <div className={className}></div>;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/shared/frontmatter/types.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * These types are found from the app.metadataTypeManager object
 3 |  */
 4 | export enum ObsidianPropertyType {
 5 | 	TEXT = "text",
 6 | 	NUMBER = "number",
 7 | 	TAGS = "tags",
 8 | 	MULTITEXT = "multitext",
 9 | 	CHECKBOX = "checkbox",
10 | 	ALIASES = "aliases",
11 | 	DATETIME = "datetime",
12 | 	DATE = "date",
13 | }
14 | 


--------------------------------------------------------------------------------
/src/react/export-app/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-export-app textarea {
 2 |     width: 100%;
 3 |     height: 200px;
 4 |     resize: vertical;
 5 | }
 6 | 
 7 | .dataloom-export-app select {
 8 |     background-color: var(--background-secondary-alt) !important;
 9 | }
10 | 
11 | .dataloom-copy-button {
12 |     background-color: var(--background-secondary-alt) !important;
13 | }


--------------------------------------------------------------------------------
/src/shared/cell-content/file-cell-content.ts:
--------------------------------------------------------------------------------
 1 | import { componentsToWikiLink } from "../link-and-path/markdown-link-utils";
 2 | 
 3 | export const getFileCellContent = (
 4 | 	path: string,
 5 | 	shouldRemoveMarkdown: boolean
 6 | ) => {
 7 | 	if (shouldRemoveMarkdown) return path;
 8 | 	if (path === "") return "";
 9 | 	return componentsToWikiLink(path, null);
10 | };
11 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/error/command-arguments-error.ts:
--------------------------------------------------------------------------------
 1 | export default class CommandArgumentsError extends Error {
 2 | 	constructor(type: "delete" | "update") {
 3 | 		let message = "";
 4 | 		if (type === "delete") {
 5 | 			message = "Either 'id' or 'last' must be defined";
 6 | 		}
 7 | 		super(message);
 8 | 		this.name = "CommandArgumentsError";
 9 | 	}
10 | }
11 | 


--------------------------------------------------------------------------------
/src/react/shared/suggest-list/clear-button.tsx:
--------------------------------------------------------------------------------
 1 | import Divider from "../divider";
 2 | import MenuItem from "../menu-item";
 3 | 
 4 | interface Props {
 5 | 	onClick?: () => void;
 6 | }
 7 | 
 8 | export default function ClearButton({ onClick }: Props) {
 9 | 	return (
10 | 		<>
11 | 			<Divider />
12 | 			<MenuItem name="Clear" onClick={onClick} />
13 | 		</>
14 | 	);
15 | }
16 | 


--------------------------------------------------------------------------------
/src/shared/spacing/hooks.ts:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | 
 3 | export const useOverflow = (
 4 | 	shouldWrap: boolean,
 5 | 	options?: { ellipsis?: boolean }
 6 | ) => {
 7 | 	const { ellipsis = false } = options ?? {};
 8 | 	if (shouldWrap) return "dataloom-overflow--wrap";
 9 | 	if (ellipsis) return "dataloom-overflow--ellipsis";
10 | 	return "dataloom-overflow--hide";
11 | };
12 | 


--------------------------------------------------------------------------------
/src/react/shared/menu-provider/utils.ts:
--------------------------------------------------------------------------------
 1 | export const getPositionFromEl = (el: HTMLElement) => {
 2 | 	const { top, left, width, height } = el.getBoundingClientRect();
 3 | 	return { top, left, width, height };
 4 | };
 5 | 
 6 | export const findMenuTriggerEl = (menuId: string) => {
 7 | 	return document.querySelector(
 8 | 		`[data-menu-id="${menuId}"]`
 9 | 	) as HTMLElement | null;
10 | };
11 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/types.ts:
--------------------------------------------------------------------------------
 1 | export enum SubmenuType {
 2 | 	TYPE,
 3 | 	OPTIONS,
 4 | 	CURRENCY,
 5 | 	DATE_FORMAT,
 6 | 	DATE_FORMAT_SEPARATOR,
 7 | 	HORIZONTAL_PADDING,
 8 | 	TIME_FORMAT,
 9 | 	VERTICAL_PADDING,
10 | 	ASPECT_RATIO,
11 | 	TEXT_INPUT_NUMBER_PREFIX,
12 | 	TEXT_INPUT_NUMBER_SUFFIX,
13 | 	TEXT_INPUT_NUMBER_SEPARATOR,
14 | 	FRONTMATTER_KEY,
15 | 	CONTENTS_SORT_DIR
16 | }
17 | 


--------------------------------------------------------------------------------
/src/shared/spacing/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-overflow--wrap {
 2 |     overflow: hidden;
 3 |     overflow-wrap: break-word;
 4 |     white-space: normal !important;
 5 | }
 6 | 
 7 | .dataloom-overflow--hide {
 8 |     overflow: hidden;
 9 |     white-space: nowrap;
10 | }
11 | 
12 | .dataloom-overflow--ellipsis {
13 |     overflow: hidden;
14 |     white-space: nowrap;
15 |     text-overflow: ellipsis;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/react/loom-app/footer-cell-container/utils.ts:
--------------------------------------------------------------------------------
 1 | import { v5 as uuidv5 } from "uuid";
 2 | 
 3 | const NAMESPACE = "fa23ee5e-43ae-45e0-83ed-97c577913416";
 4 | 
 5 | export const hashString = (value: string) => {
 6 | 	return uuidv5(value, NAMESPACE);
 7 | };
 8 | 
 9 | export const round2Digits = (value: number) => {
10 | 	if (value.toString().includes(".")) return parseFloat(value.toFixed(2));
11 | 	return value;
12 | };
13 | 


--------------------------------------------------------------------------------
/src/react/shared/spinner/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-spinner {
 2 |     width: 50px;
 3 |     height: 50px;
 4 |     border: 2px solid #3498db;
 5 |     border-top: 2px solid transparent;
 6 |     border-radius: 50%;
 7 |     animation: spin 1s linear infinite;
 8 | }
 9 | 
10 | @keyframes spin {
11 |     0% {
12 |         transform: rotate(0deg);
13 |     }
14 | 
15 |     100% {
16 |         transform: rotate(360deg);
17 |     }
18 | }


--------------------------------------------------------------------------------
/src/shared/error/column-not-found-error.ts:
--------------------------------------------------------------------------------
 1 | export default class ColumnNotFoundError extends Error {
 2 | 	constructor({ id, type }: { id?: string; type?: string }) {
 3 | 		let message = "";
 4 | 		if (id) {
 5 | 			message = `Cannot find column with id: ${id}`;
 6 | 		} else {
 7 | 			message = `Cannot find column of type: ${type}`;
 8 | 		}
 9 | 		super(message);
10 | 		this.name = "ColumnNotFoundError";
11 | 	}
12 | }
13 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/column-delete-command/types.ts:
--------------------------------------------------------------------------------
 1 | import { Cell, Column, Filter } from "../../types/loom-state";
 2 | 
 3 | export interface DeletedColumn {
 4 | 	arrIndex: number;
 5 | 	column: Column;
 6 | }
 7 | 
 8 | export interface DeletedCell {
 9 | 	rowId: string;
10 | 	arrIndex: number;
11 | 	cell: Cell;
12 | }
13 | 
14 | export interface DeletedFilter {
15 | 	arrIndex: number;
16 | 	filter: Filter;
17 | }
18 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"id": "notion-like-tables",
 3 | 	"name": "DataLoom",
 4 | 	"minAppVersion": "1.4.0",
 5 | 	"description": "Weave together data from diverse sources into different views. Inspired by Excel Spreadsheets and Notion.so.",
 6 | 	"author": "DecafDev",
 7 | 	"authorUrl": "https://github.com/decaf-dev",
 8 | 	"isDesktopOnly": false,
 9 | 	"fundingUrl": "https://ko-fi.com/decaf_dev",
10 | 	"version": "8.16.1"
11 | }
12 | 


--------------------------------------------------------------------------------
/src/react/loom-app/checkbox-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | 
 3 | interface Props {
 4 | 	value: boolean;
 5 | }
 6 | 
 7 | export default function CheckboxCell({ value }: Props) {
 8 | 	return (
 9 | 		<div className="dataloom-checkbox-cell">
10 | 			<input
11 | 				className="task-list-item-checkbox"
12 | 				type="checkbox"
13 | 				checked={value}
14 | 				onChange={() => {}}
15 | 			/>
16 | 		</div>
17 | 	);
18 | }
19 | 


--------------------------------------------------------------------------------
/src/react/loom-app/new-row-button/index.tsx:
--------------------------------------------------------------------------------
 1 | import Button from "../../shared/button";
 2 | import Icon from "src/react/shared/icon";
 3 | 
 4 | interface Props {
 5 | 	onClick: () => void;
 6 | }
 7 | 
 8 | export default function NewRowButton({ onClick }: Props) {
 9 | 	return (
10 | 		<Button
11 | 			icon={<Icon lucideId="plus" />}
12 | 			ariaLabel="New row"
13 | 			onClick={() => onClick()}
14 | 		>
15 | 			New
16 | 		</Button>
17 | 	);
18 | }
19 | 


--------------------------------------------------------------------------------
/src/react/shared/stepper/step-content.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | interface Props {
 4 | 	content: React.ReactNode;
 5 | 	addTopMargin: boolean;
 6 | }
 7 | 
 8 | export default function StepContent({ content, addTopMargin }: Props) {
 9 | 	let className = "dataloom-step__content";
10 | 	if (addTopMargin) {
11 | 		className += " dataloom-step__content--margin-top";
12 | 	}
13 | 	return <div className={className}>{content}</div>;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/checkbox-cell-content.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	CHECKBOX_MARKDOWN_CHECKED,
 3 | 	CHECKBOX_MARKDOWN_UNCHECKED,
 4 | } from "../markdown/constants";
 5 | 
 6 | export const getCheckboxCellContent = (
 7 | 	value: boolean,
 8 | 	shouldRemoveMarkdown: boolean
 9 | ) => {
10 | 	if (shouldRemoveMarkdown) {
11 | 		if (value) return "true";
12 | 		return "false";
13 | 	}
14 | 	return value ? CHECKBOX_MARKDOWN_CHECKED : CHECKBOX_MARKDOWN_UNCHECKED;
15 | };
16 | 


--------------------------------------------------------------------------------
/src/react/loom-app/tag-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import Tag from "../../shared/tag";
 2 | 
 3 | import { Color } from "src/shared/loom-state/types/loom-state";
 4 | 
 5 | import "./styles.css";
 6 | 
 7 | interface Props {
 8 | 	content: string;
 9 | 	color: Color;
10 | }
11 | 
12 | export default function TagCell({ content, color }: Props) {
13 | 	return (
14 | 		<div className="dataloom-tag-cell">
15 | 			<Tag content={content} color={color} />
16 | 		</div>
17 | 	);
18 | }
19 | 


--------------------------------------------------------------------------------
/src/react/shared/icon/styles.css:
--------------------------------------------------------------------------------
 1 | svg.dataloom-svg {
 2 |     vertical-align: middle;
 3 | }
 4 | 
 5 | svg.dataloom-svg--sm {
 6 |     width: var(--icon-s);
 7 |     height: var(--icon-s);
 8 | }
 9 | 
10 | svg.dataloom-svg--md {
11 |     width: var(--icon-m);
12 |     height: var(--icon-m);
13 | }
14 | 
15 | svg.dataloom-svg--lg {
16 |     width: var(--icon-l);
17 |     height: var(--icon-l);
18 | }
19 | 
20 | svg.dataloom-svg--xl {
21 |     width: 20px;
22 |     height: 20px;
23 | }
24 | 


--------------------------------------------------------------------------------
/src/react/shared/suggest-list/create-button.tsx:
--------------------------------------------------------------------------------
 1 | import MenuItem from "src/react/shared/menu-item";
 2 | import Divider from "../divider";
 3 | 
 4 | interface Props {
 5 | 	value: string;
 6 | 	onClick?: (value: string) => void;
 7 | }
 8 | 
 9 | export default function CreateButton({ value, onClick }: Props) {
10 | 	return (
11 | 		<>
12 | 			<MenuItem
13 | 				name={`Create ${value}`}
14 | 				onClick={() => onClick?.(value)}
15 | 			/>
16 | 			<Divider />
17 | 		</>
18 | 	);
19 | }
20 | 


--------------------------------------------------------------------------------
/src/shared/export/export-to-csv.tsx:
--------------------------------------------------------------------------------
 1 | import Papa from "papaparse";
 2 | 
 3 | import { loomStateToArray } from "./loom-state-to-array";
 4 | import { LoomState } from "../loom-state/types/loom-state";
 5 | import { App } from "obsidian";
 6 | 
 7 | export const exportToCSV = (
 8 | 	app: App,
 9 | 	loomState: LoomState,
10 | 	shouldRemoveMarkdown: boolean
11 | ): string => {
12 | 	const arr = loomStateToArray(app, loomState, shouldRemoveMarkdown);
13 | 	return Papa.unparse(arr);
14 | };
15 | 


--------------------------------------------------------------------------------
/src/data/network.ts:
--------------------------------------------------------------------------------
 1 | import { Notice, requestUrl } from "obsidian";
 2 | 
 3 | export const getLastestGithubRelease = async () => {
 4 | 	try {
 5 | 		const response = await requestUrl({
 6 | 			url: "https://api.github.com/repos/decaf-dev/obsidian-dataloom/releases/latest",
 7 | 			method: "GET",
 8 | 		});
 9 | 		const body = response.json;
10 | 		return body;
11 | 	} catch (err) {
12 | 		console.error(err);
13 | 		new Notice("Error fetching latest release");
14 | 		return null;
15 | 	}
16 | };
17 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/active-filter-bubble/index.tsx:
--------------------------------------------------------------------------------
 1 | import Bubble from "src/react/shared/bubble";
 2 | 
 3 | interface Props {
 4 | 	numActive: number;
 5 | }
 6 | 
 7 | export default function ActiveFilterBubble({ numActive }: Props) {
 8 | 	if (numActive === 0) return <></>;
 9 | 
10 | 	const value = `${numActive} active filter${numActive > 1 ? "s" : ""}`;
11 | 	return (
12 | 		<div className="dataloom-active-filter-bubble">
13 | 			<Bubble value={value} />
14 | 		</div>
15 | 	);
16 | }
17 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	env: { node: true, es2020: true },
 3 | 	extends: [
 4 | 		"eslint:recommended",
 5 | 		"plugin:@typescript-eslint/recommended",
 6 | 		"plugin:react-hooks/recommended",
 7 | 	],
 8 | 	parser: "@typescript-eslint/parser",
 9 | 	parserOptions: { ecmaVersion: "latest", sourceType: "module" },
10 | 	rules: {
11 | 		"@typescript-eslint/no-empty-function": "off",
12 | 		"@typescript-eslint/no-explicit-any": "off",
13 | 		"react-hooks/exhaustive-deps": "error",
14 | 	},
15 | };
16 | 


--------------------------------------------------------------------------------
/src/react/import-app/match-columns/body-cell.tsx:
--------------------------------------------------------------------------------
 1 | import { useOverflow } from "src/shared/spacing/hooks";
 2 | 
 3 | interface Props {
 4 | 	isDisabled: boolean;
 5 | 	value: string;
 6 | }
 7 | 
 8 | export default function BodyCell({ value, isDisabled }: Props) {
 9 | 	const overflowClassName = useOverflow(false, {
10 | 		ellipsis: true,
11 | 	});
12 | 
13 | 	let className = overflowClassName;
14 | 	if (isDisabled) className += " dataloom-disabled";
15 | 	return <td className={className}>{value}</td>;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/react/loom-app/new-column-button/index.tsx:
--------------------------------------------------------------------------------
 1 | import Button from "../../shared/button";
 2 | import Icon from "../../shared/icon";
 3 | 
 4 | import "./styles.css";
 5 | 
 6 | interface Props {
 7 | 	onClick: () => void;
 8 | }
 9 | 
10 | export default function NewColumnButton({ onClick }: Props) {
11 | 	return (
12 | 		<div className="dataloom-new-column">
13 | 			<Button
14 | 				icon={<Icon lucideId="plus" />}
15 | 				ariaLabel="New column"
16 | 				onClick={() => onClick()}
17 | 			/>
18 | 		</div>
19 | 	);
20 | }
21 | 


--------------------------------------------------------------------------------
/src/react/loom-app/embed-cell-edit/internal-embed-suggest.tsx:
--------------------------------------------------------------------------------
 1 | import { SuggestList } from "src/react/shared/suggest-list";
 2 | 
 3 | import { LOOM_EXTENSION } from "src/data/constants";
 4 | 
 5 | interface Props {
 6 | 	onChange: (value: string) => void;
 7 | }
 8 | 
 9 | export default function InternalEmbedSuggest({ onChange }: Props) {
10 | 	return (
11 | 		<SuggestList
12 | 			showInput
13 | 			hiddenExtensions={["md", LOOM_EXTENSION]}
14 | 			onItemClick={(item) => onChange(item?.path ?? "")}
15 | 		/>
16 | 	);
17 | }
18 | 


--------------------------------------------------------------------------------
/src/data/constants.ts:
--------------------------------------------------------------------------------
 1 | export const DEFAULT_LOOM_NAME = "Untitled";
 2 | 
 3 | export const LOOM_EXTENSION = "loom";
 4 | 
 5 | /**
 6 |  * Matches an extension with a leading period.
 7 |  * @example
 8 |  * .loom
 9 |  */
10 | export const EXTENSION_REGEX = new RegExp(/\.[a-z]*$/);
11 | 
12 | /**
13 |  * Matches all wiki links
14 |  * @example
15 |  * [[my-file]]
16 |  * @example
17 |  * [[my-file|alias]]
18 |  * @example
19 |  * [[my-file|]]
20 |  */
21 | export const WIKI_LINK_REGEX = new RegExp(/\[\[([^|\]]+)(\|([\w-]*))?\]\]/g);
22 | 


--------------------------------------------------------------------------------
/src/react/shared/text/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-text {
 2 |     white-space: nowrap;
 3 |     margin: 0;
 4 |     color: var(--text-normal);
 5 | }
 6 | 
 7 | .dataloom-text--muted {
 8 |     color: var(--text-muted);
 9 | }
10 | 
11 | .dataloom-text--faint {
12 |     color: var(--text-faint);
13 | }
14 | 
15 | .dataloom-text--semibold {
16 |     font-weight: var(--font-semibold);
17 | }
18 | 
19 | .dataloom-text--on-accent {
20 |     color: var(--text-on-accent);
21 | }
22 | 
23 | .dataloom-text--error {
24 |     color: var(--text-error);
25 | }


--------------------------------------------------------------------------------
/src/shared/match/index.spec.ts:
--------------------------------------------------------------------------------
 1 | import { isNumber } from ".";
 2 | 
 3 | describe("isNumber", () => {
 4 | 	it("returns true if number", () => {
 5 | 		const value = isNumber("123456");
 6 | 		expect(value).toEqual(true);
 7 | 	});
 8 | 
 9 | 	it("returns false if a number with a space", () => {
10 | 		const value = isNumber("123 567");
11 | 		expect(value).toEqual(false);
12 | 	});
13 | 
14 | 	it("returns false if contains test", () => {
15 | 		const value = isNumber("ABC123");
16 | 		expect(value).toEqual(false);
17 | 	});
18 | });
19 | 


--------------------------------------------------------------------------------
/src/react/loom-app/text-cell/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-text-cell {
 2 |     width: 100%;
 3 |     height: 100%;
 4 | }
 5 | 
 6 | .dataloom-text-cell__container {
 7 |     text-align: left;
 8 | }
 9 | 
10 | .dataloom-text-cell__container p {
11 |     margin: 0;
12 | }
13 | 
14 | /* .contains-task-list is from DataView. It is what is rendered for a task list */
15 | .dataloom-text-cell__container ul:not(.contains-task-list) {
16 |     padding-left: var(--dataloom-spacing--xl);
17 |     padding-right: 0;
18 |     margin-top: 0;
19 |     margin-bottom: 0;
20 | }


--------------------------------------------------------------------------------
/src/react/loom-app/body-cell-container/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-cell--body__container {
 2 |     display: flex;
 3 |     width: 100%;
 4 |     height: 100%;
 5 |     min-height: var(--dataloom-cell-min-height);
 6 | 	padding: var(--dataloom-cell-spacing-x) var(--dataloom-cell-spacing-y);
 7 |     cursor: pointer;
 8 |     color: var(--text-normal); /* Stop dimming of text when mouse leaves embedded loom */
 9 | }
10 | 
11 | .dataloom-cell--body__container--no-padding {
12 | 	padding: 0;
13 | }
14 | 
15 | .dataloom-cell--uneditable {
16 | 	cursor: default;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/react/shared/suggest-list/suggest-input/index.tsx:
--------------------------------------------------------------------------------
 1 | import Input from "../../input";
 2 | 
 3 | import "./styles.css";
 4 | 
 5 | interface Props {
 6 | 	value: string;
 7 | 	onChange: (value: string) => void;
 8 | }
 9 | 
10 | export default function SuggestInput({ value, onChange }: Props) {
11 | 	return (
12 | 		<div className="dataloom-suggest-input">
13 | 			<Input
14 | 				isTransparent
15 | 				focusOutline="none"
16 | 				placeholder="Search for a file..."
17 | 				value={value}
18 | 				onChange={onChange}
19 | 			/>
20 | 		</div>
21 | 	);
22 | }
23 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-11.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState11 } from "../types/loom-state-11";
 3 | import { LoomState12 } from "../types/loom-state-12";
 4 | 
 5 | /**
 6 |  * Migrates to 8.2.0
 7 |  */
 8 | export default class MigrateState11 implements MigrateState {
 9 | 	public migrate(prevState: LoomState11): LoomState12 {
10 | 		return {
11 | 			...prevState,
12 | 			model: {
13 | 				...prevState.model,
14 | 				settings: {
15 | 					numFrozenColumns: 1,
16 | 				},
17 | 			},
18 | 		};
19 | 	}
20 | }
21 | 


--------------------------------------------------------------------------------
/src/react/shared/bubble/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-bubble {
 2 |     border-radius: 8px;
 3 |     padding: 2px 6px;
 4 |     user-select: none;
 5 |     color: var(--text-on-accent);
 6 |     border: 1px solid var(--background-modifier-border);
 7 |     background-color: var(--color-accent);
 8 | }
 9 | 
10 | .dataloom-bubble.dataloom-bubble--no-fill {
11 |     background-color: transparent;
12 |     color: inherit;
13 | }
14 | 
15 | .dataloom-bubble span {
16 |     max-width: 150px;
17 |     overflow: hidden;
18 |     text-overflow: ellipsis;
19 |     white-space: nowrap;
20 | }


--------------------------------------------------------------------------------
/src/shared/cell-content/time-content.ts:
--------------------------------------------------------------------------------
 1 | import { dateTimeToDateString } from "../date/date-time-conversion";
 2 | import {
 3 | 	DateFormat,
 4 | 	DateFormatSeparator,
 5 | } from "../loom-state/types/loom-state";
 6 | 
 7 | export const getTimeCellContent = (
 8 | 	dateTime: string | null,
 9 | 	format: DateFormat,
10 | 	separator: DateFormatSeparator,
11 | 	hour12: boolean
12 | ) => {
13 | 	if (dateTime !== null) {
14 | 		return dateTimeToDateString(dateTime, format, separator, {
15 | 			includeTime: true,
16 | 			hour12,
17 | 		});
18 | 	}
19 | 	return "";
20 | };
21 | 


--------------------------------------------------------------------------------
/src/shared/event/types.ts:
--------------------------------------------------------------------------------
 1 | export type DataLoomEvent =
 2 | 	| "add-column"
 3 | 	| "delete-column"
 4 | 	| "add-row"
 5 | 	| "delete-row"
 6 | 	| "app-refresh-by-state"
 7 | 	| "app-refresh-by-file"
 8 | 	| "file-frontmatter-change"
 9 | 	| "file-delete"
10 | 	| "folder-delete"
11 | 	| "folder-rename"
12 | 	| "file-rename"
13 | 	| "file-create"
14 | 	| "global-click"
15 | 	| "global-keydown"
16 | 	| "download-csv"
17 | 	| "download-markdown"
18 | 	| "property-type-change"
19 | 	| "clear-menu-trigger-focus";
20 | 
21 | export type EventCallback = (...data: any[]) => void;
22 | 


--------------------------------------------------------------------------------
/src/shared/dragging/utils.ts:
--------------------------------------------------------------------------------
 1 | export const getRowId = (rowEl: HTMLElement) => {
 2 | 	//React Virtuoso only works with our keyboard focus navigation system when we memorize the row component
 3 | 	//We can only do this if we don't place a `data-row-id` attr on the row itself. The workaround to this is to place
 4 | 	//the `data-row-id` attr on the last td element in the row (which contains the drag menu)
 5 | 	const td = rowEl.firstChild as HTMLElement | null;
 6 | 	if (!td) return null;
 7 | 
 8 | 	const id = td.getAttribute("data-row-id");
 9 | 	return id ?? null;
10 | };
11 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/date-cell-content.ts:
--------------------------------------------------------------------------------
 1 | import { dateTimeToDateString } from "../date/date-time-conversion";
 2 | import {
 3 | 	DateFormat,
 4 | 	DateFormatSeparator,
 5 | } from "../loom-state/types/loom-state";
 6 | 
 7 | export const getDateCellContent = (
 8 | 	dateTime: string | null,
 9 | 	format: DateFormat,
10 | 	separator: DateFormatSeparator,
11 | 	includeTime: boolean,
12 | 	hour12: boolean
13 | ) => {
14 | 	if (dateTime !== null)
15 | 		return dateTimeToDateString(dateTime, format, separator, {
16 | 			includeTime,
17 | 			hour12,
18 | 		});
19 | 	return "";
20 | };
21 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/text-cell-content.spec.ts:
--------------------------------------------------------------------------------
 1 | import { getTextCellContent } from "./text-cell-content";
 2 | 
 3 | describe("getTextCellContent", () => {
 4 | 	it("should return markdown if renderMarkdown is true", () => {
 5 | 		const result = getTextCellContent("[[inbox/filename|filename]]", false);
 6 | 		expect(result).toEqual("[[inbox/filename|filename]]");
 7 | 	});
 8 | 
 9 | 	it("should return the text if renderMarkdown is false", () => {
10 | 		const result = getTextCellContent("[[inbox/filename|filename]]", true);
11 | 		expect(result).toEqual("inbox/filename");
12 | 	});
13 | });
14 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-column/types.ts:
--------------------------------------------------------------------------------
 1 | import { CellType, Column } from "src/shared/loom-state/types/loom-state";
 2 | 
 3 | export type ColumnChangeHandler = (
 4 | 	id: string,
 5 | 	data: Partial<Column>,
 6 | 	options?: { shouldSortRows?: boolean; shouldSaveFrontmatter?: boolean }
 7 | ) => void;
 8 | 
 9 | export type ColumnTypeClickHandler = (id: string, type: CellType) => void;
10 | 
11 | export type ColumnDeleteClickHandler = (id: string) => void;
12 | 
13 | export type ColumnAddClickHandler = () => void;
14 | 
15 | export type ColumnReorderHandler = (dragId: string, targetId: string) => void;
16 | 


--------------------------------------------------------------------------------
/src/shared/render/embed.ts:
--------------------------------------------------------------------------------
 1 | import { App } from "obsidian";
 2 | 
 3 | export const handleLinkClick = (app: App, event: MouseEvent) => {
 4 | 	const targetEl = event.target as HTMLElement;
 5 | 	const closestAnchor =
 6 | 		targetEl.tagName === "A" ? targetEl : targetEl.closest("a");
 7 | 
 8 | 	if (!closestAnchor) {
 9 | 		return;
10 | 	}
11 | 
12 | 	if (closestAnchor.hasClass("internal-link")) {
13 | 		event.preventDefault();
14 | 
15 | 		const href = closestAnchor.getAttr("href");
16 | 		const newLeaf = event.ctrlKey || event.metaKey;
17 | 
18 | 		if (href) app.workspace.openLinkText(href, "", newLeaf);
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # vscode
 2 | .vscode
 3 | 
 4 | # Intellij
 5 | *.iml
 6 | .idea
 7 | 
 8 | # npm
 9 | node_modules
10 | 
11 | # Don't include the compiled main.js file in the repo.
12 | # They should be uploaded to GitHub releases instead.
13 | main.js
14 | 
15 | # Exclude sourcemaps
16 | *.map
17 | 
18 | # Exclude macOS Finder (System Explorer) View States
19 | .DS_Store
20 | 
21 | # Ignore build files
22 | main.css
23 | main.css.map
24 | main.js
25 | main.js.map
26 | 
27 | # obsidian
28 | data.json
29 | 
30 | # pnpm lock yaml
31 | pnpm-lock.yaml
32 | 
33 | *.log
34 | .DS_Store
35 | 
36 | dist/
37 | 


--------------------------------------------------------------------------------
/src/react/loom-app/multi-tag-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import Tag from "../../shared/tag";
 2 | import Wrap from "src/react/shared/wrap";
 3 | 
 4 | import { Tag as TagType } from "../../../shared/loom-state/types/loom-state";
 5 | 
 6 | import "./styles.css";
 7 | 
 8 | interface Props {
 9 | 	cellTags: TagType[];
10 | }
11 | 
12 | export default function MultiTagCell({ cellTags }: Props) {
13 | 	return (
14 | 		<div className="dataloom-multi-tag-cell">
15 | 			<Wrap>
16 | 				{cellTags.map((tag: TagType) => (
17 | 					<Tag key={tag.id} content={tag.content} color={tag.color} />
18 | 				))}
19 | 			</Wrap>
20 | 		</div>
21 | 	);
22 | }
23 | 


--------------------------------------------------------------------------------
/src/react/shared/checkbox-filter-select/index.tsx:
--------------------------------------------------------------------------------
 1 | import Select from "../select";
 2 | 
 3 | interface Props {
 4 | 	value: boolean;
 5 | 	onChange: (value: boolean) => void;
 6 | }
 7 | 
 8 | export default function CheckboxFilterSelect({ value, onChange }: Props) {
 9 | 	function handleChange(value: string) {
10 | 		if (value === "true") {
11 | 			onChange(true);
12 | 			return;
13 | 		}
14 | 		onChange(false);
15 | 	}
16 | 
17 | 	return (
18 | 		<Select value={value ? "true" : "false"} onChange={handleChange}>
19 | 			<option value="false">Unchecked</option>
20 | 			<option value="true">Checked</option>
21 | 		</Select>
22 | 	);
23 | }
24 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/column-add-command/column-add-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import ColumnAddCommand from ".";
 2 | import { createLoomState } from "../../loom-state-factory";
 3 | 
 4 | describe("column-add-command", () => {
 5 | 	it("should add a column when execute() is called", () => {
 6 | 		//Arrange
 7 | 		const prevState = createLoomState(1, 1);
 8 | 		const command = new ColumnAddCommand();
 9 | 
10 | 		//Act
11 | 		const executeState = command.execute(prevState);
12 | 
13 | 		//Assert
14 | 		expect(executeState.model.columns.length).toEqual(2);
15 | 		expect(executeState.model.rows[0].cells.length).toEqual(2);
16 | 	});
17 | });
18 | 


--------------------------------------------------------------------------------
/src/react/loom-app/file-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useRenderMarkdown } from "src/shared/render-utils";
 2 | import { appendOrReplaceFirstChild } from "src/shared/render/utils";
 3 | 
 4 | import "./styles.css";
 5 | 
 6 | interface Props {
 7 | 	content: string;
 8 | }
 9 | 
10 | export default function FileCell({ content }: Props) {
11 | 	const { containerRef, renderRef } = useRenderMarkdown(content);
12 | 	return (
13 | 		<div className="dataloom-file-cell">
14 | 			<div
15 | 				ref={(node) => {
16 | 					containerRef.current = node;
17 | 					appendOrReplaceFirstChild(node, renderRef.current);
18 | 				}}
19 | 			/>
20 | 		</div>
21 | 	);
22 | }
23 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/source-file-content.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	isMarkdownFile,
 3 | 	stripDirectory,
 4 | 	stripFileExtension,
 5 | } from "../link-and-path/file-path-utils";
 6 | import { componentsToWikiLink } from "../link-and-path/markdown-link-utils";
 7 | 
 8 | export const getSourceFileContent = (
 9 | 	path: string,
10 | 	shouldRemoveMarkdown = false
11 | ) => {
12 | 	if (shouldRemoveMarkdown) return path;
13 | 	if (path === "") return "";
14 | 
15 | 	let fileName = stripDirectory(path);
16 | 	if (isMarkdownFile(path)) {
17 | 		fileName = stripFileExtension(fileName);
18 | 	}
19 | 
20 | 	return componentsToWikiLink(fileName, null);
21 | };
22 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/source-cell-content.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	ObsidianFolderSource,
 3 | 	Source,
 4 | 	SourceType,
 5 | } from "../loom-state/types/loom-state";
 6 | 
 7 | export const getSourceCellContent = (source: Source | null) => {
 8 | 	if (source === null) return "Internal";
 9 | 
10 | 	const { type } = source;
11 | 	switch (type) {
12 | 		case SourceType.FOLDER: {
13 | 			const { path } = source as ObsidianFolderSource;
14 | 			return path;
15 | 		}
16 | 		case SourceType.FRONTMATTER: {
17 | 			const { propertyKey } = source;
18 | 			return propertyKey;
19 | 		}
20 | 		default:
21 | 			throw new Error("Source type not supported");
22 | 	}
23 | };
24 | 


--------------------------------------------------------------------------------
/src/obsidian/shared/index.ts:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | 
 3 | export const renderDivider = (contentEl: HTMLElement | DocumentFragment) => {
 4 | 	const isFirstChild = contentEl.children.length === 0;
 5 | 	const dividerEl = contentEl.createEl("hr", {
 6 | 		cls: "dataloom-modal__divider",
 7 | 	});
 8 | 	if (isFirstChild) {
 9 | 		dividerEl.addClass("dataloom-modal__divider--first-child");
10 | 	}
11 | };
12 | 
13 | export const setModalTitle = (containerEl: HTMLElement, text: string) => {
14 | 	const modalTitleEl = containerEl.querySelector(".modal-title");
15 | 	modalTitleEl?.createEl("h3", { text });
16 | 	modalTitleEl?.addClass("dataloom-modal__title");
17 | };
18 | 


--------------------------------------------------------------------------------
/src/react/loom-app/embed-cell-edit/external-embed-input.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import Input from "src/react/shared/input";
 4 | 
 5 | import { usePlaceCursorAtEnd } from "src/shared/hooks";
 6 | 
 7 | interface Props {
 8 | 	value: string;
 9 | 	onChange: (value: string) => void;
10 | }
11 | 
12 | export default function ExternalEmbedInput({ value, onChange }: Props) {
13 | 	const ref = React.useRef<HTMLInputElement | null>(null);
14 | 
15 | 	usePlaceCursorAtEnd(ref, value);
16 | 	return (
17 | 		<Input
18 | 			ref={ref}
19 | 			showBorder
20 | 			placeholder="Enter a url"
21 | 			value={value}
22 | 			onChange={onChange}
23 | 		/>
24 | 	);
25 | }
26 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/filter-by-filters/evaluate-with-precedence.ts:
--------------------------------------------------------------------------------
 1 | export interface Expression {
 2 | 	operator: "and" | "or";
 3 | 	value: boolean;
 4 | }
 5 | 
 6 | export const evaluateWithPrecedence = (expressions: Expression[]): boolean => {
 7 | 	if (expressions.length === 0) {
 8 | 		return true;
 9 | 	}
10 | 
11 | 	let result = expressions[0].value;
12 | 
13 | 	for (let i = 1; i < expressions.length; i++) {
14 | 		const { operator, value } = expressions[i];
15 | 
16 | 		//Or has higher precedance
17 | 		if (operator === "or") {
18 | 			result = result || value;
19 | 		} else {
20 | 			result = result && value;
21 | 		}
22 | 	}
23 | 
24 | 	return result;
25 | };
26 | 


--------------------------------------------------------------------------------
/src/obsidian/modal/welcome-modal/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-welcome-modal__card-container {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     row-gap: 1rem;
 5 | }
 6 | 
 7 | .dataloom-welcome-modal__card {
 8 |     display: flex;
 9 |     padding: 1em 1.5em;
10 |     column-gap: 1.5em;
11 |     align-items: center;
12 |     border: 1px solid var(--background-modifier-border);
13 | }
14 | 
15 | .dataloom-welcome-modal__card-icon {
16 |     width: 1.5em;
17 |     height: 1.5em;
18 | }
19 | 
20 | .dataloom-welcome-modal__card-title {
21 |     margin: 0;
22 | }
23 | 
24 | .dataloom-welcome-modal__card-description {
25 |     margin-top: 0.25em;
26 |     margin-bottom: 0.5em;
27 | }


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/row-add-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import RowAddCommand from "./row-add-command";
 2 | import { createLoomState } from "../loom-state-factory";
 3 | 
 4 | describe("row-add-command", () => {
 5 | 	it("should add a row when execute() is called", () => {
 6 | 		//Arrange
 7 | 		const prevState = createLoomState(1, 1);
 8 | 		const command = new RowAddCommand();
 9 | 
10 | 		//Act
11 | 		const executeState = command.execute(prevState);
12 | 
13 | 		//Assert
14 | 		expect(executeState.model.rows.length).toEqual(2);
15 | 		expect(executeState.model.rows[0].cells.length).toEqual(1);
16 | 		expect(executeState.model.rows[1].cells.length).toEqual(1);
17 | 	});
18 | });
19 | 


--------------------------------------------------------------------------------
/src/react/loom-app/text-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useRenderMarkdown } from "src/shared/render-utils";
 2 | import { appendOrReplaceFirstChild } from "src/shared/render/utils";
 3 | 
 4 | import "./styles.css";
 5 | 
 6 | interface Props {
 7 | 	value: string;
 8 | }
 9 | 
10 | export default function TextCell({ value }: Props) {
11 | 	const { containerRef, renderRef } = useRenderMarkdown(value);
12 | 
13 | 	return (
14 | 		<div className="dataloom-text-cell">
15 | 			<div
16 | 				className="dataloom-text-cell__container"
17 | 				ref={(node) => {
18 | 					containerRef.current = node;
19 | 					appendOrReplaceFirstChild(node, renderRef.current);
20 | 				}}
21 | 			/>
22 | 		</div>
23 | 	);
24 | }
25 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-cell-container/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-cell--header__container {
 2 |     display: flex;
 3 |     justify-content: space-between;
 4 |     min-height: var(--dataloom-cell-min-height);
 5 | }
 6 | 
 7 | .dataloom-cell--header__inner-container {
 8 |     display: flex;
 9 |     align-items: center;
10 |     /* Use 100% so that the resize indicator appears at the end */
11 |     width: 100%;
12 |     overflow: hidden;
13 |     white-space: nowrap;
14 |     text-overflow: ellipsis;
15 |     user-select: none;
16 |     padding: var(--dataloom-cell-spacing-x) var(--dataloom-cell-spacing-y);
17 |     color: var(--text-normal); /* Stop dimming of text when mouse leaves embedded loom */
18 | }


--------------------------------------------------------------------------------
/src/shared/error/cell-not-found-error.ts:
--------------------------------------------------------------------------------
 1 | export default class CellNotFoundError extends Error {
 2 | 	constructor(options: { id?: string; rowId?: string; columnId?: string }) {
 3 | 		const { id, rowId, columnId } = options || {};
 4 | 		let message = "";
 5 | 		if (rowId && columnId) {
 6 | 			message = `Cannot find cell with row id: ${rowId} and column id: ${columnId}`;
 7 | 		} else if (rowId) {
 8 | 			message = `Cannot find cell with row id: ${rowId}`;
 9 | 		} else if (columnId) {
10 | 			message = `Cannot find cell with column id: ${columnId}`;
11 | 		} else {
12 | 			message = `Cannot find cell with id: ${id}`;
13 | 		}
14 | 		super(message);
15 | 		this.name = "CellNotFoundError";
16 | 	}
17 | }
18 | 


--------------------------------------------------------------------------------
/src/react/shared/multi-select/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-multi-select {
 2 | 	box-shadow: var(--input-shadow);
 3 | 	border-radius: var(--input-radius);
 4 | 	height: var(--input-height);
 5 | 	font-size: var(--font-ui-small);
 6 | 	background-color: var(--interactive-normal);
 7 | 	color: var(--text-normal);
 8 | 	padding: 0 0.8em;
 9 | }
10 | 
11 | .dataloom-multi-select:hover {
12 | 	box-shadow: var(--input-shadow-hover);
13 | 	background-color: var(--interactive-hover);
14 | }
15 | 
16 | .dataloom-multi-select__options {
17 | 	width: 100%;
18 | 	cursor: pointer;
19 | 	max-height: 300px;
20 | 	overflow-x: auto;
21 | 	overflow-y: scroll;
22 | }
23 | 
24 | .dataloom-multi-select__option {
25 | 	padding: 2px 6px;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/number-cell-content.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CurrencyType, NumberFormat } from "../loom-state/types/loom-state";
 2 | import { getNumberCellContent } from "./number-cell-content";
 3 | 
 4 | describe("getNumberCellContent", () => {
 5 | 	it("should return the number if value is a number", () => {
 6 | 		const result = getNumberCellContent(NumberFormat.NUMBER, 123);
 7 | 		expect(result).toEqual("123");
 8 | 	});
 9 | 
10 | 	it("should return a currency string if value is a number and format is currency", () => {
11 | 		const result = getNumberCellContent(NumberFormat.CURRENCY, 123, {
12 | 			currency: CurrencyType.UNITED_STATES,
13 | 		});
14 | 		expect(result).toEqual("$123.00");
15 | 	});
16 | });
17 | 


--------------------------------------------------------------------------------
/src/react/import-app/types.ts:
--------------------------------------------------------------------------------
 1 | export enum StepType {
 2 | 	DATA_TYPE,
 3 | 	DATA_SOURCE,
 4 | 	UPLOAD_DATA,
 5 | 	MATCH_COLUMNS,
 6 | }
 7 | 
 8 | export enum DataType {
 9 | 	UNSELECTED = "Select an option",
10 | 	CSV = "CSV",
11 | 	MARKDOWN = "Markdown",
12 | }
13 | 
14 | export enum DataSource {
15 | 	UNSELECTED = "Select an option",
16 | 	FILE = "File",
17 | 	PASTE = "Paste from clipboard",
18 | }
19 | 
20 | export interface ColumnMatch {
21 | 	//The index of the column in the imported data
22 | 	importColumnIndex: number;
23 | 	//The column id of the matching column in the existing state
24 | 	//A null value means that the column is new
25 | 	columnId: string;
26 | }
27 | 
28 | export type ImportData = string[][];
29 | 


--------------------------------------------------------------------------------
/src/shared/link-and-path/link-predicates.ts:
--------------------------------------------------------------------------------
 1 | export const isExternalLink = (link: string) => {
 2 | 	if (isUrlLink(link)) return true;
 3 | 	if (isObsidianLink(link)) return false;
 4 | 	return false;
 5 | };
 6 | 
 7 | export const isRelativePath = (link: string) => {
 8 | 	return !isUrlLink(link);
 9 | };
10 | 
11 | export const isUrlLink = (link: string) => {
12 | 	if (isHttpLink(link)) return true;
13 | 	if (isObsidianLink(link)) return true;
14 | 	return false;
15 | };
16 | 
17 | export const isObsidianLink = (link: string) => {
18 | 	return link.startsWith("obsidian://");
19 | };
20 | 
21 | export const isHttpLink = (link: string) => {
22 | 	return link.startsWith("http://") || link.startsWith("https://");
23 | };
24 | 


--------------------------------------------------------------------------------
/src/react/import-app/data-type-select.tsx:
--------------------------------------------------------------------------------
 1 | import { DataType } from "src/react/import-app/types";
 2 | import Stack from "src/react/shared/stack";
 3 | 
 4 | interface Props {
 5 | 	value: DataType;
 6 | 	onChange: (value: DataType) => void;
 7 | }
 8 | 
 9 | export default function DataTypeSelect({ value, onChange }: Props) {
10 | 	return (
11 | 		<div className="dataloom-data-type-select">
12 | 			<Stack>
13 | 				<select
14 | 					value={value}
15 | 					onChange={(e) => onChange(e.target.value as DataType)}
16 | 				>
17 | 					{Object.values(DataType).map((type) => (
18 | 						<option key={type} value={type}>
19 | 							{type}
20 | 						</option>
21 | 					))}
22 | 				</select>
23 | 			</Stack>
24 | 		</div>
25 | 	);
26 | }
27 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/column-update-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import ColumnUpdateCommand from "./column-update-command";
 2 | import { createLoomState } from "../loom-state-factory";
 3 | 
 4 | describe("column-update-command", () => {
 5 | 	it("should update a column property when execute() is called", async () => {
 6 | 		//Arrange
 7 | 		const prevState = createLoomState(1, 1);
 8 | 		const command = new ColumnUpdateCommand(prevState.model.columns[0].id, {
 9 | 			width: "250px",
10 | 		});
11 | 
12 | 		//Act
13 | 		const executeState = command.execute(prevState);
14 | 
15 | 		//Assert
16 | 		expect(executeState.model.columns.length).toEqual(1);
17 | 		expect(executeState.model.columns[0].width).toEqual("250px");
18 | 	});
19 | });
20 | 


--------------------------------------------------------------------------------
/src/shared/versioning.ts:
--------------------------------------------------------------------------------
 1 | export const legacyVersionToString = (version: number) => {
 2 | 	return version.toString().split("").join(".");
 3 | };
 4 | 
 5 | export const isVersionLessThan = (oldVersion: string, newVersion: string) => {
 6 | 	const oldVersionArray = oldVersion.split(".");
 7 | 	const newVersionArray = newVersion.split(".");
 8 | 
 9 | 	for (let i = 0; i < oldVersionArray.length; i++) {
10 | 		const oldVersionNumber = parseInt(oldVersionArray[i]);
11 | 		const newVersionNumber = parseInt(newVersionArray[i]);
12 | 
13 | 		if (oldVersionNumber < newVersionNumber) {
14 | 			return true;
15 | 		}
16 | 
17 | 		if (oldVersionNumber > newVersionNumber) {
18 | 			return false;
19 | 		}
20 | 	}
21 | 
22 | 	return false;
23 | };
24 | 


--------------------------------------------------------------------------------
/src/react/loom-app/source-file-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useRenderMarkdown } from "src/shared/render-utils";
 2 | import { appendOrReplaceFirstChild } from "src/shared/render/utils";
 3 | 
 4 | import "./styles.css";
 5 | 
 6 | interface Props {
 7 | 	content: string;
 8 | }
 9 | 
10 | export default function SourceFileCell({ content }: Props) {
11 | 	const { containerRef, renderRef } = useRenderMarkdown(content);
12 | 
13 | 	return (
14 | 		<div
15 | 			className="dataloom-source-file-cell"
16 | 			ref={(node) => {
17 | 				if (content !== "") {
18 | 					containerRef.current = node;
19 | 					appendOrReplaceFirstChild(node, renderRef.current);
20 | 				}
21 | 			}}
22 | 		>
23 | 			{content === "" && content}
24 | 		</div>
25 | 	);
26 | }
27 | 


--------------------------------------------------------------------------------
/src/react/shared/divider/index.tsx:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | 
 3 | interface Props {
 4 | 	width?: string;
 5 | 	height?: string;
 6 | 	isVertical?: boolean;
 7 | }
 8 | 
 9 | export default function Divider({
10 | 	isVertical = false,
11 | 	width = "100%",
12 | 	height = "100%",
13 | }: Props) {
14 | 	return (
15 | 		<hr
16 | 			className="dataloom-hr"
17 | 			style={{
18 | 				width: !isVertical ? width : undefined,
19 | 				height: isVertical === true ? height : undefined,
20 | 				borderTop:
21 | 					isVertical === false
22 | 						? "1px solid var(--hr-color)"
23 | 						: undefined,
24 | 				borderLeft:
25 | 					isVertical === true
26 | 						? "1px var(--hr-color) solid"
27 | 						: undefined,
28 | 			}}
29 | 		/>
30 | 	);
31 | }
32 | 


--------------------------------------------------------------------------------
/src/shared/dom-utils.ts:
--------------------------------------------------------------------------------
 1 | export const findAncestorsUntilClassName = (
 2 | 	currentEl: HTMLElement,
 3 | 	className: string
 4 | ) => {
 5 | 	const ancestors: HTMLElement[] = [];
 6 | 	let el: HTMLElement | null = currentEl;
 7 | 
 8 | 	while (el && !el.classList.contains(className)) {
 9 | 		ancestors.push(el);
10 | 		el = el.parentElement;
11 | 	}
12 | 	return ancestors;
13 | };
14 | 
15 | export const findAncestorWithClassName = (
16 | 	currentEl: HTMLElement,
17 | 	className: string
18 | ) => {
19 | 	let el: HTMLElement | null = currentEl;
20 | 
21 | 	while (el && !el.classList.contains(className)) {
22 | 		if (el.classList.contains(className)) {
23 | 			return el;
24 | 		}
25 | 		el = el.parentElement;
26 | 	}
27 | 	return null;
28 | };
29 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-15.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState15 } from "../types";
 3 | 
 4 | /**
 5 |  * Migrates to 8.8.0
 6 |  */
 7 | export default class MigrateState15 implements MigrateState {
 8 | 	public migrate(prevState: LoomState15): LoomState15 {
 9 | 		const { rows, columns, sources, filters, settings, externalRowOrder } =
10 | 			prevState.model;
11 | 		//There was a bug where `bodyRows` was being saved instead of `rows`
12 | 		//This update removes that for all tables
13 | 		return {
14 | 			...prevState,
15 | 			model: {
16 | 				rows,
17 | 				columns,
18 | 				filters,
19 | 				settings,
20 | 				externalRowOrder,
21 | 				sources,
22 | 			},
23 | 		};
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/src/react/import-app/data-source-select.tsx:
--------------------------------------------------------------------------------
 1 | import { DataSource } from "src/react/import-app/types";
 2 | import Stack from "src/react/shared/stack";
 3 | 
 4 | interface Props {
 5 | 	value: DataSource;
 6 | 	onChange: (value: DataSource) => void;
 7 | }
 8 | 
 9 | export default function DataSourceSelect({ value, onChange }: Props) {
10 | 	return (
11 | 		<div className="dataloom-data-source-select">
12 | 			<Stack>
13 | 				<select
14 | 					value={value}
15 | 					onChange={(e) => onChange(e.target.value as DataSource)}
16 | 				>
17 | 					{Object.values(DataSource).map((type) => (
18 | 						<option key={type} value={type}>
19 | 							{type}
20 | 						</option>
21 | 					))}
22 | 				</select>
23 | 			</Stack>
24 | 		</div>
25 | 	);
26 | }
27 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/filter-menu/filter-operator/index.tsx:
--------------------------------------------------------------------------------
 1 | import { FilterOperator as FilterOperatorType } from "src/shared/loom-state/types/loom-state";
 2 | import Select from "src/react/shared/select";
 3 | 
 4 | interface Props {
 5 | 	id: string;
 6 | 	value: FilterOperatorType;
 7 | 	onChange: (id: string, value: FilterOperatorType) => void;
 8 | }
 9 | 
10 | export default function FilterOperator({ id, value, onChange }: Props) {
11 | 	return (
12 | 		<Select
13 | 			className="dataloom-filter-operator"
14 | 			value={value}
15 | 			onChange={(newValue) =>
16 | 				onChange(id, newValue as FilterOperatorType)
17 | 			}
18 | 		>
19 | 			<option value="or">Or</option>
20 | 			<option value="and">And</option>
21 | 		</Select>
22 | 	);
23 | }
24 | 


--------------------------------------------------------------------------------
/src/shared/spacing/index.ts:
--------------------------------------------------------------------------------
 1 | import { SpacingSize } from "./types";
 2 | 
 3 | export const getSpacing = (size: SpacingSize) => {
 4 | 	let spacing = "";
 5 | 	if (size === "sm") {
 6 | 		spacing = "var(--dataloom-spacing--sm)";
 7 | 	} else if (size === "md") {
 8 | 		spacing = "var(--dataloom-spacing--md)";
 9 | 	} else if (size === "lg") {
10 | 		spacing = "var(--dataloom-spacing--lg)";
11 | 	} else if (size === "xl") {
12 | 		spacing = "var(--dataloom-spacing--xl)";
13 | 	} else if (size === "2xl") {
14 | 		spacing = "var(--dataloom-spacing--2xl)";
15 | 	} else if (size === "3xl") {
16 | 		spacing = "var(--dataloom-spacing--3xl)";
17 | 	} else if (size === "4xl") {
18 | 		spacing = "var(--dataloom-spacing--4xl)";
19 | 	}
20 | 	return spacing;
21 | };
22 | 


--------------------------------------------------------------------------------
/src/react/export-app/export-type-select.tsx:
--------------------------------------------------------------------------------
 1 | import Stack from "src/react/shared/stack";
 2 | import { ExportType } from "../../shared/export/types";
 3 | 
 4 | interface Props {
 5 | 	value: ExportType;
 6 | 	onChange: (value: ExportType) => void;
 7 | }
 8 | 
 9 | export default function ExportTypeSelect({ value, onChange }: Props) {
10 | 	return (
11 | 		<Stack spacing="xl">
12 | 			<label htmlFor="type-select">File Type</label>
13 | 			<select
14 | 				id="type-select"
15 | 				value={value}
16 | 				onChange={(e) => onChange(e.target.value as ExportType)}
17 | 			>
18 | 				{Object.values(ExportType).map((type) => (
19 | 					<option key={type} value={type}>
20 | 						{type}
21 | 					</option>
22 | 				))}
23 | 			</select>
24 | 		</Stack>
25 | 	);
26 | }
27 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-app-events/index.tsx:
--------------------------------------------------------------------------------
 1 | import Logger from "js-logger";
 2 | import React from "react";
 3 | import { useMenuOperations } from "src/react/shared/menu-provider/hooks";
 4 | 
 5 | export const useAppEvents = () => {
 6 | 	const { topMenu, onRequestClose, onClearMenuTriggerFocus } =
 7 | 		useMenuOperations();
 8 | 	const handleClick = React.useCallback(
 9 | 		(e: React.MouseEvent) => {
10 | 			Logger.trace("App handleClick");
11 | 			e.stopPropagation();
12 | 
13 | 			if (!topMenu) {
14 | 				onClearMenuTriggerFocus();
15 | 				return;
16 | 			}
17 | 			onRequestClose(topMenu.id, "save-and-close");
18 | 		},
19 | 		[topMenu, onRequestClose, onClearMenuTriggerFocus]
20 | 	);
21 | 	return {
22 | 		onClick: handleClick,
23 | 	};
24 | };
25 | 


--------------------------------------------------------------------------------
/src/react/loom-app/text-cell-edit/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-text-cell-edit {
 2 |     width: 100%;
 3 |     height: 100%;
 4 | }
 5 | 
 6 | .dataloom-text-cell-edit textarea {
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     overflow: hidden;
10 |     padding: var(--dataloom-cell-spacing-x) var(--dataloom-cell-spacing-y);
11 |     resize: none;
12 |     border: 0; /* Clear default Obsidian style */
13 |     border-radius: 0; /* Clear default Obsidian style */
14 |     font-size: var(--font-size-normal); /* Reset to default Obsidian style */
15 | }
16 | 
17 | .dataloom-text-cell-edit textarea:focus {
18 |     box-shadow: none; /* Clear default Obsidian style */
19 |     outline: 2px solid var(--background-modifier-border-focus);
20 |     outline-offset: -2px;
21 | }


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-tag/types.ts:
--------------------------------------------------------------------------------
 1 | import { Color, Tag } from "src/shared/loom-state/types/loom-state";
 2 | 
 3 | export type TagAddHandler = (
 4 | 	cellId: string,
 5 | 	columnId: string,
 6 | 	markdown: string,
 7 | 	color: Color
 8 | ) => void;
 9 | 
10 | export type TagCellAddHandler = (cellId: string, tagId: string) => void;
11 | 
12 | export type TagCellRemoveHandler = (cellId: string, tagId: string) => void;
13 | 
14 | export type TagCellMultipleRemoveHandler = (
15 | 	cellId: string,
16 | 	tagIds: string[]
17 | ) => void;
18 | 
19 | export type TagDeleteHandler = (columnId: string, tagId: string) => void;
20 | 
21 | export type TagChangeHandler = (
22 | 	columnId: string,
23 | 	tagId: string,
24 | 	data: Partial<Tag>,
25 | 	isPartial?: boolean
26 | ) => void;
27 | 


--------------------------------------------------------------------------------
/src/data/date-utils.ts:
--------------------------------------------------------------------------------
 1 | import { padToTwoDigits } from "src/shared/date/utils";
 2 | 
 3 | export const dateTimeToObsidianDateTime = (
 4 | 	value: string,
 5 | 	includeTime: boolean
 6 | ) => {
 7 | 	const date = new Date(value);
 8 | 
 9 | 	//Get local components
10 | 	const year = date.getFullYear();
11 | 	const month = padToTwoDigits(date.getMonth() + 1); // getMonth() returns 0-11
12 | 	const day = padToTwoDigits(date.getDate());
13 | 	const hours = padToTwoDigits(date.getHours());
14 | 	const minutes = padToTwoDigits(date.getMinutes());
15 | 	const seconds = padToTwoDigits(date.getSeconds());
16 | 
17 | 	const dateString = `${year}-${month}-${day}`;
18 | 
19 | 	if (!includeTime) {
20 | 		return dateString;
21 | 	}
22 | 	return `${dateString}T${hours}:${minutes}:${seconds}`;
23 | };
24 | 


--------------------------------------------------------------------------------
/src/react/global.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     /** Spacing system **/
 3 |     --dataloom-spacing--xs: 2px;
 4 |     --dataloom-spacing--sm: 4px;
 5 |     --dataloom-spacing--md: 8px;
 6 |     --dataloom-spacing--lg: 12px;
 7 |     --dataloom-spacing--xl: 16px;
 8 |     --dataloom-spacing--2xl: 24px;
 9 |     --dataloom-spacing--3xl: 36px;
10 |     --dataloom-spacing--4xl: 48px;
11 | 
12 |     --dataloom-cell-spacing-x: var(--dataloom-spacing--sm);
13 |     --dataloom-cell-spacing-y: var(--dataloom-spacing--lg);
14 |     --dataloom-cell-min-height: 1.9rem;
15 | 
16 |     /** Font system **/
17 |     --dataloom-font-size--xs: 0.8rem;
18 |     --dataloom-font-size--sm: 0.9rem;
19 |     --dataloom-font-size--md: 1rem;
20 |     --dataloom-font-size--lg: 1.1rem;
21 |     --dataloom-font-size--xl: 1.3rem;
22 | }


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-19.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import {
 3 | 	LoomState18,
 4 | 	SourceType as SourceType18,
 5 | } from "../types/loom-state-18";
 6 | import { LoomState19, ObsidianFolderSource } from "../types/loom-state-19";
 7 | 
 8 | /**
 9 |  * Migrates to 8.15.0
10 |  */
11 | export default class MigrateState19 implements MigrateState {
12 | 	public migrate(prevState: LoomState18): LoomState19 {
13 | 		const { sources } = prevState.model;
14 | 
15 | 		const nextSources = sources.filter(
16 | 			(source) => source.type !== SourceType18.TAG
17 | 		) as unknown as ObsidianFolderSource[];
18 | 
19 | 		return {
20 | 			...prevState,
21 | 			model: {
22 | 				...prevState.model,
23 | 				sources: nextSources,
24 | 			},
25 | 		};
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": "./",
 4 |     "target": "ES6",
 5 |     "lib": ["ES2021", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Source maps */
10 |     "inlineSourceMap": true,
11 | 		"inlineSources": true,
12 | 
13 |     /* Bundler mode */
14 |     "moduleResolution": "node",
15 |     "allowSyntheticDefaultImports": true,
16 |     "resolveJsonModule": true,
17 |     "isolatedModules": true,
18 |     "jsx": "react-jsx",
19 | 
20 |     /* Linting */
21 |     "strict": true,
22 |     "strictPropertyInitialization": false,
23 |     "noUnusedLocals": true,
24 |     "noUnusedParameters": true,
25 |     "noFallthroughCasesInSwitch": true
26 |   },
27 |   "include": ["src/**/*.tsx", "src/**/*.ts"],
28 | }
29 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-cell-container/column-resize/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-column-resize {
 2 |     position: relative;
 3 | }
 4 | 
 5 | .dataloom-column-resize__handle {
 6 |     position: absolute;
 7 |     height: 100%;
 8 |     right: 0;
 9 |     bottom: 0;
10 |     width: 5px;
11 |     cursor: col-resize;
12 | }
13 | 
14 | .dataloom-column-resize__handle:hover {
15 |     background-color: var(--interactive-accent);
16 | }
17 | 
18 | .dataloom-column-resize__handle:active {
19 |      background-color: var(--interactive-accent);
20 | }
21 | 
22 | .dataloom-column-resize__handle--dragging {
23 |     background-color: var(--interactive-accent);
24 | }
25 | 
26 | .dataloom-auto-width {
27 | 	width: auto !important;
28 | }
29 | 
30 | .dataloom-nowrap {
31 | 	white-space: nowrap !important;
32 | }
33 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/filter-delete-command.ts:
--------------------------------------------------------------------------------
 1 | import { LoomState } from "../types";
 2 | import { Filter } from "../types/loom-state";
 3 | import LoomStateCommand from "./loom-state-command";
 4 | 
 5 | export default class FilterDeleteCommand extends LoomStateCommand {
 6 | 	private id: string;
 7 | 
 8 | 	constructor(id: string) {
 9 | 		super(false);
10 | 		this.id = id;
11 | 	}
12 | 
13 | 	execute(prevState: LoomState): LoomState {
14 | 		const { filters } = prevState.model;
15 | 		const nextFilters: Filter[] = filters.filter((f) => f.id !== this.id);
16 | 
17 | 		const newState = {
18 | 			...prevState,
19 | 			model: {
20 | 				...prevState.model,
21 | 				filters: nextFilters,
22 | 			},
23 | 		};
24 | 		this.finishExecute(prevState, newState);
25 | 		return newState;
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/src/data/deserialization-error.ts:
--------------------------------------------------------------------------------
 1 | import { ValidationError } from "runtypes";
 2 | 
 3 | export default class DeserializationError extends Error {
 4 | 	pluginVersion: string;
 5 | 	fileVersion: string;
 6 | 	failedMigration: string | null;
 7 | 
 8 | 	constructor(
 9 | 		error: unknown,
10 | 		pluginVersion: string,
11 | 		fileVersion: string,
12 | 		failedMigration: string | null
13 | 	) {
14 | 		let message = "";
15 | 		if (error instanceof ValidationError) {
16 | 			message = JSON.stringify(error.details, null, 2);
17 | 		} else {
18 | 			message = (error as Error).message;
19 | 		}
20 | 
21 | 		super(message);
22 | 
23 | 		this.name = "DeserializationError";
24 | 		this.pluginVersion = pluginVersion;
25 | 		this.fileVersion = fileVersion;
26 | 		this.failedMigration = failedMigration;
27 | 	}
28 | }
29 | 


--------------------------------------------------------------------------------
/src/react/shared/date-filter-select/index.tsx:
--------------------------------------------------------------------------------
 1 | import Select from "src/react/shared/select";
 2 | import { getDisplayNameForDateFilterOption } from "src/shared/loom-state/type-display-names";
 3 | import { DateFilterOption } from "src/shared/loom-state/types/loom-state";
 4 | 
 5 | interface Props {
 6 | 	value: DateFilterOption;
 7 | 	onChange: (value: DateFilterOption) => void;
 8 | }
 9 | 
10 | export default function DateFilterSelect({ value, onChange }: Props) {
11 | 	return (
12 | 		<Select
13 | 			value={value}
14 | 			onChange={(value) => onChange(value as DateFilterOption)}
15 | 		>
16 | 			{Object.values(DateFilterOption).map((option) => (
17 | 				<option key={option} value={option}>
18 | 					{getDisplayNameForDateFilterOption(option)}
19 | 				</option>
20 | 			))}
21 | 		</Select>
22 | 	);
23 | }
24 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-1.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState1 } from "../types/loom-state-1";
 3 | import {
 4 | 	LoomState2,
 5 | 	DateFormat as DateFormat2,
 6 | 	Column as Column2,
 7 | } from "../types/loom-state-2";
 8 | 
 9 | /**
10 |  * Migrates to 6.2.0
11 |  */
12 | export default class MigrateState1 implements MigrateState {
13 | 	public migrate(prevState: LoomState1): LoomState2 {
14 | 		const { columns } = prevState.model;
15 | 
16 | 		const nextColumns: Column2[] = columns.map((column) => {
17 | 			return {
18 | 				...column,
19 | 				dateFormat: DateFormat2.DD_MM_YYYY,
20 | 			};
21 | 		});
22 | 		return {
23 | 			...prevState,
24 | 			model: {
25 | 				...prevState.model,
26 | 				columns: nextColumns,
27 | 			},
28 | 		};
29 | 	}
30 | }
31 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/time-format-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import MenuItem from "src/react/shared/menu-item";
 2 | import Submenu from "../../shared/submenu";
 3 | 
 4 | interface Props {
 5 | 	title: string;
 6 | 	value: boolean;
 7 | 	onValueClick: (value: boolean) => void;
 8 | 	onBackClick: () => void;
 9 | }
10 | 
11 | export default function TimeFormatSubmenu({
12 | 	title,
13 | 	value,
14 | 	onValueClick,
15 | 	onBackClick,
16 | }: Props) {
17 | 	return (
18 | 		<Submenu title={title} onBackClick={onBackClick}>
19 | 			<MenuItem
20 | 				name="12 hour"
21 | 				onClick={() => onValueClick(true)}
22 | 				isSelected={value === true}
23 | 			/>
24 | 			<MenuItem
25 | 				name="24 hour"
26 | 				onClick={() => onValueClick(false)}
27 | 				isSelected={value === false}
28 | 			/>
29 | 		</Submenu>
30 | 	);
31 | }
32 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/time-content.spec.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	DateFormat,
 3 | 	DateFormatSeparator,
 4 | } from "../loom-state/types/loom-state";
 5 | import { getTimeCellContent } from "./time-content";
 6 | 
 7 | describe("getTimeCellContent", () => {
 8 | 	it("should return a datetime string if the time is a number", () => {
 9 | 		const result = getTimeCellContent(
10 | 			"2020-12-31T00:00:00Z",
11 | 			DateFormat.MM_DD_YYYY,
12 | 			DateFormatSeparator.HYPHEN,
13 | 			true
14 | 		);
15 | 		expect(result).toEqual("12-30-2020 5:00 PM");
16 | 	});
17 | 
18 | 	it("should return an empty string if time is null", () => {
19 | 		const result = getTimeCellContent(
20 | 			null,
21 | 			DateFormat.DD_MM_YYYY,
22 | 			DateFormatSeparator.HYPHEN,
23 | 			true
24 | 		);
25 | 		expect(result).toEqual("");
26 | 	});
27 | });
28 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sort-bubble-list.tsx:
--------------------------------------------------------------------------------
 1 | import SortBubble from "./sort-bubble";
 2 | import Stack from "src/react/shared/stack";
 3 | 
 4 | import { Column } from "src/shared/loom-state/types/loom-state";
 5 | 
 6 | interface Props {
 7 | 	sortedColumns: Column[];
 8 | 	onRemoveClick: (columnId: string) => void;
 9 | }
10 | 
11 | export default function SortBubbleList({
12 | 	sortedColumns,
13 | 	onRemoveClick,
14 | }: Props) {
15 | 	return (
16 | 		<Stack spacing="sm" isHorizontal>
17 | 			{sortedColumns.map((column, i) => {
18 | 				const { id, sortDir, content } = column;
19 | 				return (
20 | 					<SortBubble
21 | 						key={i}
22 | 						sortDir={sortDir}
23 | 						content={content}
24 | 						onRemoveClick={() => onRemoveClick(id)}
25 | 					/>
26 | 				);
27 | 			})}
28 | 		</Stack>
29 | 	);
30 | }
31 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-0.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState0 } from "../types/loom-state-0";
 3 | import {
 4 | 	LoomState1,
 5 | 	CurrencyType as CurrencyType1,
 6 | 	Column as Column1,
 7 | } from "../types/loom-state-1";
 8 | 
 9 | /**
10 |  * Migrates to 6.1.0
11 |  */
12 | export default class MigrateState0 implements MigrateState {
13 | 	public migrate(prevState: LoomState0): LoomState1 {
14 | 		const { columns } = prevState.model;
15 | 
16 | 		const nextColumns: Column1[] = columns.map((column) => {
17 | 			return {
18 | 				...column,
19 | 				currencyType: CurrencyType1.UNITED_STATES,
20 | 			};
21 | 		});
22 | 		return {
23 | 			...prevState,
24 | 			model: {
25 | 				...prevState.model,
26 | 				columns: nextColumns,
27 | 			},
28 | 		};
29 | 	}
30 | }
31 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-22.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState } from "../types";
 3 | import { SortDir, Column } from "../types/loom-state";
 4 | import { LoomState21 } from "../types/loom-state-21";
 5 | 
 6 | /**
 7 |  * Migrates to 8.16.0
 8 |  */
 9 | export default class MigrateState22 implements MigrateState {
10 | 	public migrate(prevState: LoomState21): LoomState {
11 | 		const { columns } = prevState.model;
12 | 
13 | 		const nextColumns: Column[] = columns.map((column) => {
14 | 			return {
15 | 				...column,
16 | 				multiTagSortDir: SortDir.NONE,
17 | 			};
18 | 		});
19 | 
20 | 		return {
21 | 			...prevState,
22 | 			model: {
23 | 				...prevState.model,
24 | 				columns: nextColumns,
25 | 			},
26 | 		};
27 | 	}
28 | }
29 | 


--------------------------------------------------------------------------------
/src/react/shared/menu-provider/types.ts:
--------------------------------------------------------------------------------
 1 | import { LoomMenuPosition } from "../menu/types";
 2 | 
 3 | export enum LoomMenuLevel {
 4 | 	ONE = 1,
 5 | 	TWO = 2,
 6 | 	THREE = 3,
 7 | }
 8 | 
 9 | export interface LoomMenu {
10 | 	id: string;
11 | 	parentComponentId: string;
12 | 	level: LoomMenuLevel;
13 | 	position: LoomMenuPosition;
14 | 	shouldRequestOnClose: boolean;
15 | 	shouldFocusTriggerOnClose: boolean;
16 | 	name?: string;
17 | }
18 | 
19 | export type LoomMenuCloseRequestType = "save-and-close" | "close-on-save";
20 | 
21 | export interface LoomMenuCloseRequest {
22 | 	menuId: string;
23 | 	type: LoomMenuCloseRequestType;
24 | }
25 | 
26 | export interface FocusedMenuTrigger {
27 | 	parentComponentId: string;
28 | 	name?: string;
29 | }
30 | 
31 | export type PositionUpdateHandler = (value: LoomMenuPosition) => void;
32 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/padding-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import MenuItem from "src/react/shared/menu-item";
 2 | import Submenu from "../../shared/submenu";
 3 | import { PaddingSize } from "src/shared/loom-state/types/loom-state";
 4 | 
 5 | interface Props {
 6 | 	title: string;
 7 | 	value: PaddingSize;
 8 | 	onValueClick: (value: PaddingSize) => void;
 9 | 	onBackClick: () => void;
10 | }
11 | 
12 | export default function PaddingSubmenu({
13 | 	title,
14 | 	value,
15 | 	onValueClick,
16 | 	onBackClick,
17 | }: Props) {
18 | 	return (
19 | 		<Submenu title={title} onBackClick={onBackClick}>
20 | 			{Object.values(PaddingSize).map((size) => (
21 | 				<MenuItem
22 | 					key={size}
23 | 					name={size}
24 | 					onClick={() => onValueClick(size)}
25 | 					isSelected={size === value}
26 | 				/>
27 | 			))}
28 | 		</Submenu>
29 | 	);
30 | }
31 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sort-bubble/index.tsx:
--------------------------------------------------------------------------------
 1 | import Icon from "src/react/shared/icon";
 2 | import Bubble from "src/react/shared/bubble";
 3 | 
 4 | import { SortDir } from "src/shared/loom-state/types/loom-state";
 5 | 
 6 | interface SortBubbleProps {
 7 | 	sortDir: SortDir;
 8 | 	content: string;
 9 | 	onRemoveClick: () => void;
10 | }
11 | 
12 | export default function SortBubble({
13 | 	sortDir,
14 | 	content,
15 | 	onRemoveClick,
16 | }: SortBubbleProps) {
17 | 	return (
18 | 		<div className="dataloom-sort-bubble">
19 | 			<Bubble
20 | 				canRemove
21 | 				value={content}
22 | 				icon={
23 | 					sortDir === SortDir.ASC ? (
24 | 						<Icon lucideId="arrow-up" />
25 | 					) : (
26 | 						<Icon lucideId="arrow-down" />
27 | 					)
28 | 				}
29 | 				onRemoveClick={onRemoveClick}
30 | 			/>
31 | 		</div>
32 | 	);
33 | }
34 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-cell/index.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { useLoomState } from "src/react/loom-app/loom-state-provider";
 3 | import CellBodyUpdateCommand from "src/shared/loom-state/commands/cell-body-update-command";
 4 | import { Cell } from "src/shared/loom-state/types/loom-state";
 5 | import React from "react";
 6 | import Logger from "js-logger";
 7 | 
 8 | export const useCell = () => {
 9 | 	const { doCommand } = useLoomState();
10 | 
11 | 	const handleCellChange = React.useCallback(
12 | 		(id: string, value: Partial<Cell>, isPartial = true) => {
13 | 			Logger.trace("handleCellChange", {
14 | 				id,
15 | 				value,
16 | 				isPartial,
17 | 			});
18 | 
19 | 			doCommand(new CellBodyUpdateCommand(id, value, isPartial));
20 | 		},
21 | 		[doCommand]
22 | 	);
23 | 
24 | 	return {
25 | 		onCellChange: handleCellChange,
26 | 	};
27 | };
28 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/aspect-ratio-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import MenuItem from "src/react/shared/menu-item";
 2 | import Submenu from "../../shared/submenu";
 3 | import { AspectRatio } from "src/shared/loom-state/types/loom-state";
 4 | 
 5 | interface Props {
 6 | 	title: string;
 7 | 	value: AspectRatio;
 8 | 	onValueClick: (value: AspectRatio) => void;
 9 | 	onBackClick: () => void;
10 | }
11 | 
12 | export default function AspectRatioSubmenu({
13 | 	title,
14 | 	value,
15 | 	onValueClick,
16 | 	onBackClick,
17 | }: Props) {
18 | 	return (
19 | 		<Submenu title={title} onBackClick={onBackClick}>
20 | 			{Object.values(AspectRatio).map((ratio) => (
21 | 				<MenuItem
22 | 					key={ratio}
23 | 					name={ratio}
24 | 					onClick={() => onValueClick(ratio)}
25 | 					isSelected={ratio === value}
26 | 				/>
27 | 			))}
28 | 		</Submenu>
29 | 	);
30 | }
31 | 


--------------------------------------------------------------------------------
/src/react/loom-app/text-cell-edit/suggest-menu.tsx:
--------------------------------------------------------------------------------
 1 | import Menu from "src/react/shared/menu";
 2 | import { SuggestList } from "../../shared/suggest-list";
 3 | import { TFile } from "obsidian";
 4 | import { LoomMenuPosition } from "src/react/shared/menu/types";
 5 | 
 6 | interface Props {
 7 | 	id: string;
 8 | 	isOpen: boolean;
 9 | 	position: LoomMenuPosition;
10 | 	filterValue: string;
11 | 	onItemClick: (item: TFile | null) => void;
12 | }
13 | 
14 | export default function SuggestMenu({
15 | 	id,
16 | 	isOpen,
17 | 	position,
18 | 	filterValue,
19 | 	onItemClick,
20 | }: Props) {
21 | 	return (
22 | 		<Menu
23 | 			id={id}
24 | 			isOpen={isOpen}
25 | 			position={position}
26 | 			width={275}
27 | 			topOffset={30}
28 | 			leftOffset={30}
29 | 		>
30 | 			<SuggestList filterValue={filterValue} onItemClick={onItemClick} />
31 | 		</Menu>
32 | 	);
33 | }
34 | 


--------------------------------------------------------------------------------
/src/react/shared/stepper/step-text.tsx:
--------------------------------------------------------------------------------
 1 | import Text from "../text";
 2 | import Stack from "../stack";
 3 | 
 4 | interface Props {
 5 | 	title: string;
 6 | 	description?: string;
 7 | 	isComplete: boolean;
 8 | 	onClick: () => void;
 9 | }
10 | 
11 | export default function StepText({
12 | 	title,
13 | 	description,
14 | 	isComplete,
15 | 	onClick,
16 | }: Props) {
17 | 	function handleClick() {
18 | 		if (!isComplete) return;
19 | 		onClick();
20 | 	}
21 | 
22 | 	let className = "dataloom-step__text";
23 | 	if (isComplete) {
24 | 		className += " dataloom-step__text--complete";
25 | 	}
26 | 	return (
27 | 		<div className={className}>
28 | 			<Stack spacing="sm" onClick={handleClick}>
29 | 				<Text variant="semibold" size="lg" value={title} />
30 | 				{description && <Text size="md" value={description} />}
31 | 			</Stack>
32 | 		</div>
33 | 	);
34 | }
35 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/filter-add-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import { createLoomState, createTextFilter } from "../loom-state-factory";
 2 | import FilterAddCommand from "./filter-add-command";
 3 | import { TextFilter } from "../types/loom-state";
 4 | 
 5 | describe("filter-add-command", () => {
 6 | 	it("should add a filter to the model", () => {
 7 | 		//Arrange
 8 | 		const prevState = createLoomState(1, 1);
 9 | 		const filter = createTextFilter(prevState.model.columns[0].id, {
10 | 			text: "before",
11 | 		});
12 | 		prevState.model.filters.push(filter);
13 | 		const command = new FilterAddCommand();
14 | 
15 | 		//Act
16 | 		const executeState = command.execute(prevState);
17 | 
18 | 		//Assert
19 | 		expect(executeState.model.filters.length).toEqual(2);
20 | 		expect((executeState.model.filters[1] as TextFilter).text).toEqual("");
21 | 	});
22 | });
23 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-21.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState20, LoomState21 } from "../types";
 3 | import { Row } from "../types/loom-state";
 4 | 
 5 | /**
 6 |  * Migrates to 8.15.6
 7 |  */
 8 | export default class MigrateState21 implements MigrateState {
 9 | 	public migrate(prevState: LoomState20): LoomState21 {
10 | 		const { rows } = prevState.model;
11 | 
12 | 		const nextRows: Row[] = rows.map((row) => {
13 | 			const { cells } = row;
14 | 			const nextCells = cells.map((cell) => {
15 | 				return {
16 | 					...cell,
17 | 					hasValidFrontmatter: null,
18 | 				};
19 | 			});
20 | 			return {
21 | 				...row,
22 | 				cells: nextCells,
23 | 			};
24 | 		});
25 | 
26 | 		return {
27 | 			...prevState,
28 | 			model: {
29 | 				...prevState.model,
30 | 				rows: nextRows,
31 | 			},
32 | 		};
33 | 	}
34 | }
35 | 


--------------------------------------------------------------------------------
/src/react/loom-app/disabled-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import Text from "src/react/shared/text";
 2 | 
 3 | import "./styles.css";
 4 | 
 5 | interface Props {
 6 | 	hasValidFrontmatter: boolean;
 7 | 	doesColumnHaveFrontmatterKey: boolean;
 8 | }
 9 | 
10 | export default function DisabledCell({
11 | 	hasValidFrontmatter,
12 | 	doesColumnHaveFrontmatterKey,
13 | }: Props) {
14 | 	let ariaLabel = "";
15 | 	if (!doesColumnHaveFrontmatterKey) {
16 | 		ariaLabel =
17 | 			"This cell is disabled until you choose a frontmatter key for this column";
18 | 	} else if (!hasValidFrontmatter) {
19 | 		ariaLabel =
20 | 			"This cell has an invalid property value. Please correct it in the source file.";
21 | 	}
22 | 	return (
23 | 		<div className="dataloom-disabled-cell" aria-label={ariaLabel}>
24 | 			<Text value={hasValidFrontmatter ? "" : "Invalid property value"} />
25 | 		</div>
26 | 	);
27 | }
28 | 


--------------------------------------------------------------------------------
/src/shared/render-embed.ts:
--------------------------------------------------------------------------------
 1 | import { App, MarkdownRenderer, MarkdownView, WorkspaceLeaf } from "obsidian";
 2 | import DataLoomView from "src/obsidian/dataloom-view";
 3 | 
 4 | const renderText = async (app: App, leaf: WorkspaceLeaf, value: string) => {
 5 | 	const div = document.createElement("div");
 6 | 	div.style.width = "100%";
 7 | 	div.style.height = "100%";
 8 | 
 9 | 	try {
10 | 		const view = leaf.view;
11 | 		if (view instanceof MarkdownView || view instanceof DataLoomView) {
12 | 			await MarkdownRenderer.render(
13 | 				app,
14 | 				value,
15 | 				div,
16 | 				view.file?.path ?? "",
17 | 				view
18 | 			);
19 | 		}
20 | 	} catch (e) {
21 | 		console.error(e);
22 | 	}
23 | 	return div;
24 | };
25 | 
26 | export const renderEmbed = async (
27 | 	app: App,
28 | 	leaf: WorkspaceLeaf,
29 | 	value: string
30 | ) => {
31 | 	return renderText(app, leaf, value);
32 | };
33 | 


--------------------------------------------------------------------------------
/src/shared/last-saved-manager.ts:
--------------------------------------------------------------------------------
 1 | export default class LastSavedManager {
 2 | 	private static instance: LastSavedManager;
 3 | 	private lastSavedFile: string = "";
 4 | 	private lastSavedTime: number = 0;
 5 | 
 6 | 
 7 | 	// Ensures only one instance is created
 8 | 	public static getInstance(): LastSavedManager {
 9 | 		if (!LastSavedManager.instance) {
10 | 			LastSavedManager.instance = new LastSavedManager();
11 | 		}
12 | 		return LastSavedManager.instance;
13 | 	}
14 | 
15 | 	public setLastSavedFile(fileName: string): void {
16 | 		this.lastSavedFile = fileName;
17 | 		this.lastSavedTime = Date.now();
18 | 	}
19 | 
20 | 	public getLastSavedFile(): string {
21 | 		return this.lastSavedFile;
22 | 	}
23 | 
24 | 	public getLastSavedTime(): number {
25 | 		return this.lastSavedTime;
26 | 	}
27 | 
28 | 	public clearLastSavedFile(): void {
29 | 		this.lastSavedFile = "";
30 | 	}
31 | 
32 | 
33 | }
34 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/table-settings-update-command.ts:
--------------------------------------------------------------------------------
 1 | import LoomStateCommand from "./loom-state-command";
 2 | import { LoomState, TableSettings } from "../types/loom-state";
 3 | 
 4 | export default class TableSettingsUpdateCommand<
 5 | 	K extends keyof TableSettings
 6 | > extends LoomStateCommand {
 7 | 	private key: K;
 8 | 	private value: TableSettings[K];
 9 | 
10 | 	constructor(key: K, value: TableSettings[K]) {
11 | 		super(false);
12 | 		this.key = key;
13 | 		this.value = value;
14 | 	}
15 | 
16 | 	execute(prevState: LoomState): LoomState {
17 | 		const { settings } = prevState.model;
18 | 
19 | 		const nextState = {
20 | 			...prevState,
21 | 			model: {
22 | 				...prevState.model,
23 | 				settings: {
24 | 					...settings,
25 | 					[this.key]: this.value,
26 | 				},
27 | 			},
28 | 		};
29 | 		this.finishExecute(prevState, nextState);
30 | 		return nextState;
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/src/react/shared/stepper/step-indicator.tsx:
--------------------------------------------------------------------------------
 1 | import Flex from "../flex";
 2 | import Icon from "../icon";
 3 | import Text from "../text";
 4 | 
 5 | interface Props {
 6 | 	index: number;
 7 | 	isComplete: boolean;
 8 | 	onClick: () => void;
 9 | }
10 | 
11 | export default function StepIndicator({ index, isComplete, onClick }: Props) {
12 | 	function handleClick() {
13 | 		if (!isComplete) return;
14 | 		onClick();
15 | 	}
16 | 
17 | 	let className = "dataloom-step__indicator";
18 | 	if (isComplete) {
19 | 		className += " dataloom-step__indicator--complete";
20 | 	}
21 | 	return (
22 | 		<div className={className} onClick={handleClick}>
23 | 			<Flex justify="center" align="center" height="100%">
24 | 				{isComplete ? (
25 | 					<Icon lucideId="checkmark" size="lg" />
26 | 				) : (
27 | 					<Text value={index + 1} variant="semibold" size="lg" />
28 | 				)}
29 | 			</Flex>
30 | 		</div>
31 | 	);
32 | }
33 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/checkbox-cell-content.spec.ts:
--------------------------------------------------------------------------------
 1 | import { getCheckboxCellContent } from "./checkbox-cell-content";
 2 | 
 3 | describe("getCheckboxCellContent", () => {
 4 | 	it("should return true if markdown is checked", () => {
 5 | 		const result = getCheckboxCellContent(true, true);
 6 | 		expect(result).toEqual("true");
 7 | 	});
 8 | 
 9 | 	it("should return false if markdown not checked", () => {
10 | 		const result = getCheckboxCellContent(false, true);
11 | 		expect(result).toEqual("false");
12 | 	});
13 | 
14 | 	it("should return the unchecked markdown if renderMarkdown is true", () => {
15 | 		const result = getCheckboxCellContent(true, false);
16 | 		expect(result).toEqual("[x]");
17 | 	});
18 | 
19 | 	it("should return the checked markdown if renderMarkdown is true", () => {
20 | 		const result = getCheckboxCellContent(false, false);
21 | 		expect(result).toEqual("[ ]");
22 | 	});
23 | });
24 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/date-cell-content.spec.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	DateFormat,
 3 | 	DateFormatSeparator,
 4 | } from "../loom-state/types/loom-state";
 5 | import { getDateCellContent } from "./date-cell-content";
 6 | 
 7 | describe("getDateCellContent", () => {
 8 | 	// Normal cases
 9 | 	it('returns formatted date string with MM_DD_YYYY format and "-" separator', () => {
10 | 		const result = getDateCellContent(
11 | 			"2020-01-01T23:00:00Z",
12 | 			DateFormat.MM_DD_YYYY,
13 | 			DateFormatSeparator.HYPHEN,
14 | 			false,
15 | 			true
16 | 		);
17 | 		expect(result).toEqual("01-01-2020");
18 | 	});
19 | 
20 | 	// Invalid cases
21 | 	it("returns an empty string when dateTime is null", () => {
22 | 		const result = getDateCellContent(
23 | 			null,
24 | 			DateFormat.MM_DD_YYYY,
25 | 			DateFormatSeparator.HYPHEN,
26 | 			false,
27 | 			true
28 | 		);
29 | 		expect(result).toEqual("");
30 | 	});
31 | });
32 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-5.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState5 } from "../types/loom-state-5";
 3 | import {
 4 | 	LoomState6,
 5 | 	FunctionType as FunctionType6,
 6 | 	FooterCell as FooterCell6,
 7 | } from "../types/loom-state-6";
 8 | 
 9 | /**
10 |  * Migrates to 6.9.1
11 |  */
12 | export default class MigrateState5 implements MigrateState {
13 | 	public migrate(prevState: LoomState5): LoomState6 {
14 | 		const { footerCells } = prevState.model;
15 | 
16 | 		const nextFooterCells: FooterCell6[] = footerCells.map((cell) => {
17 | 			return {
18 | 				...cell,
19 | 				functionType: cell.functionType.replace(
20 | 					/_/g,
21 | 					"-"
22 | 				) as FunctionType6,
23 | 			};
24 | 		});
25 | 
26 | 		return {
27 | 			...prevState,
28 | 			model: {
29 | 				...prevState.model,
30 | 				footerCells: nextFooterCells,
31 | 			},
32 | 		};
33 | 	}
34 | }
35 | 


--------------------------------------------------------------------------------
/src/react/loom-app/source-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import { SourceType } from "src/shared/loom-state/types/loom-state";
 2 | import Bubble from "src/react/shared/bubble";
 3 | import Icon from "src/react/shared/icon";
 4 | import { getIconIdForSourceType } from "src/react/shared/icon/utils";
 5 | import { ObsidianPropertyType } from "src/shared/frontmatter/types";
 6 | 
 7 | interface Props {
 8 | 	content: string;
 9 | 	sourceType: SourceType;
10 | 	propertyType?: ObsidianPropertyType;
11 | }
12 | 
13 | export default function SourceCell({
14 | 	content,
15 | 	sourceType,
16 | 	propertyType,
17 | }: Props) {
18 | 	return (
19 | 		<div className="dataloom-source-cell">
20 | 			<Bubble
21 | 				variant="no-fill"
22 | 				icon={
23 | 					<Icon
24 | 						lucideId={getIconIdForSourceType(sourceType, {
25 | 							propertyType,
26 | 						})}
27 | 					/>
28 | 				}
29 | 				value={content}
30 | 			/>
31 | 		</div>
32 | 	);
33 | }
34 | 


--------------------------------------------------------------------------------
/src/react/shared/modal-mount-provider/index.tsx:
--------------------------------------------------------------------------------
 1 | import { App } from "obsidian";
 2 | 
 3 | import React from "react";
 4 | 
 5 | interface ContextProps {
 6 | 	obsidianApp: App;
 7 | 	modalEl: HTMLElement;
 8 | }
 9 | 
10 | const MountContext = React.createContext<ContextProps | null>(null);
11 | 
12 | export const useModalMount = () => {
13 | 	const value = React.useContext(MountContext);
14 | 	if (value === null) {
15 | 		throw new Error(
16 | 			"useModalMount() called without a <ModalMountProvider /> in the tree."
17 | 		);
18 | 	}
19 | 
20 | 	return value;
21 | };
22 | 
23 | interface Props extends ContextProps {
24 | 	children: React.ReactNode;
25 | }
26 | 
27 | export default function ModalMountProvider({
28 | 	obsidianApp,
29 | 	modalEl,
30 | 	children,
31 | }: Props) {
32 | 	return (
33 | 		<MountContext.Provider value={{ obsidianApp, modalEl }}>
34 | 			{children}
35 | 		</MountContext.Provider>
36 | 	);
37 | }
38 | 


--------------------------------------------------------------------------------
/src/react/shared/stepper/step-buttons.tsx:
--------------------------------------------------------------------------------
 1 | import Button from "../button";
 2 | import Stack from "../stack";
 3 | 
 4 | interface Props {
 5 | 	isFirstStep: boolean;
 6 | 	isLastStep: boolean;
 7 | 	isNextDisabled?: boolean;
 8 | 	finishButtonLabel: string;
 9 | 	onNextClick: () => void;
10 | 	onBackClick: () => void;
11 | }
12 | 
13 | export default function StepButtons({
14 | 	isFirstStep,
15 | 	isLastStep,
16 | 	isNextDisabled,
17 | 	finishButtonLabel,
18 | 	onNextClick,
19 | 	onBackClick,
20 | }: Props) {
21 | 	return (
22 | 		<div className="dataloom-step__buttons">
23 | 			<Stack isHorizontal spacing="md">
24 | 				<Button
25 | 					isDisabled={isNextDisabled}
26 | 					variant="default"
27 | 					onClick={onNextClick}
28 | 				>
29 | 					{isLastStep ? finishButtonLabel : "Next"}
30 | 				</Button>
31 | 				{!isFirstStep && <Button onClick={onBackClick}>Back</Button>}
32 | 			</Stack>
33 | 		</div>
34 | 	);
35 | }
36 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/filter-delete-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	createLoomState,
 3 | 	createTagFilter,
 4 | 	createTextFilter,
 5 | } from "../loom-state-factory";
 6 | import FilterDeleteCommand from "./filter-delete-command";
 7 | 
 8 | describe("filter-delete-command", () => {
 9 | 	it("should delete a filter", () => {
10 | 		//Arrange
11 | 		const prevState = createLoomState(1, 1);
12 | 		const { id: columnId } = prevState.model.columns[0];
13 | 		const textFilter = createTextFilter(columnId);
14 | 		const tagFilter = createTagFilter(columnId);
15 | 		prevState.model.filters.push(textFilter, tagFilter);
16 | 
17 | 		const command = new FilterDeleteCommand(textFilter.id);
18 | 
19 | 		//Act
20 | 		const executeState = command.execute(prevState);
21 | 
22 | 		//Assert
23 | 		expect(executeState.model.filters.length).toEqual(1);
24 | 		expect(executeState.model.filters[0]).toEqual(tagFilter);
25 | 	});
26 | });
27 | 


--------------------------------------------------------------------------------
/src/react/loom-app/footer-cell-container/arithmetic.ts:
--------------------------------------------------------------------------------
 1 | export const getAverage = (values: number[]) => {
 2 | 	return getSum(values) / values.length;
 3 | };
 4 | 
 5 | export const getSum = (values: number[]) => {
 6 | 	return values.reduce((sum, a) => sum + a, 0);
 7 | };
 8 | 
 9 | export const getMaximum = (values: number[]) => {
10 | 	return Math.max(...values);
11 | };
12 | 
13 | export const getMinimum = (values: number[]) => {
14 | 	return Math.min(...values);
15 | };
16 | 
17 | export const getMedian = (values: number[]) => {
18 | 	const sortedValues = values.sort((a, b) => a - b);
19 | 	const middle = Math.floor(values.length / 2);
20 | 	if (values.length % 2 === 0) {
21 | 		return (sortedValues[middle - 1] + sortedValues[middle]) / 2;
22 | 	} else {
23 | 		return sortedValues[middle];
24 | 	}
25 | };
26 | 
27 | export const getRange = (values: number[]) => {
28 | 	return getMaximum(values) - getMinimum(values);
29 | };
30 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/column-add-command/index.ts:
--------------------------------------------------------------------------------
 1 | import { CellType, LoomState } from "../../types/loom-state";
 2 | import LoomStateCommand from "../loom-state-command";
 3 | import { columnAddExecute } from "./utils";
 4 | 
 5 | export default class ColumnAddCommand extends LoomStateCommand {
 6 | 	private type?: CellType;
 7 | 
 8 | 	constructor(type?: CellType) {
 9 | 		super(false);
10 | 		this.type = type;
11 | 	}
12 | 
13 | 	execute(prevState: LoomState): LoomState {
14 | 		const { columns, rows } = prevState.model;
15 | 
16 | 		const result = columnAddExecute(columns, rows, { type: this.type });
17 | 		const { columns: nextColumns, rows: nextRows } = result;
18 | 
19 | 		const nextState = {
20 | 			...prevState,
21 | 			model: {
22 | 				...prevState.model,
23 | 				columns: nextColumns,
24 | 				rows: nextRows,
25 | 			},
26 | 		};
27 | 		this.finishExecute(prevState, nextState);
28 | 		return nextState;
29 | 	}
30 | }
31 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/column-reorder-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import ColumnReorderCommand from "./column-reorder-command";
 2 | import { createLoomState } from "../loom-state-factory";
 3 | 
 4 | describe("column-update-command", () => {
 5 | 	it("moves the last column to the first column index when execute() is called", async () => {
 6 | 		//Arrange
 7 | 		const prevState = createLoomState(3, 1);
 8 | 		const firstColumn = prevState.model.columns[0].id;
 9 | 		const lastColumn = prevState.model.columns[2].id;
10 | 		const command = new ColumnReorderCommand(lastColumn, firstColumn);
11 | 
12 | 		//Act
13 | 		const executeState = command.execute(prevState);
14 | 
15 | 		//Assert
16 | 		expect(executeState.model.columns[0].id).toEqual(lastColumn);
17 | 		expect(executeState.model.columns[1].id).toEqual(firstColumn);
18 | 		expect(executeState.model.columns[2].id).toEqual(
19 | 			prevState.model.columns[1].id
20 | 		);
21 | 	});
22 | });
23 | 


--------------------------------------------------------------------------------
/src/react/loom-app/tag-cell-edit/create-tag/index.tsx:
--------------------------------------------------------------------------------
 1 | import Tag from "src/react/shared/tag";
 2 | import Stack from "src/react/shared/stack";
 3 | import Button from "src/react/shared/button";
 4 | 
 5 | import { Color } from "src/shared/loom-state/types/loom-state";
 6 | import Padding from "src/react/shared/padding";
 7 | 
 8 | interface Props {
 9 | 	content: string;
10 | 	color: Color;
11 | 	onTagAdd: (content: string, color: Color) => void;
12 | }
13 | 
14 | export default function CreateTag({ content, color, onTagAdd }: Props) {
15 | 	return (
16 | 		<div className="dataloom-create-tag">
17 | 			<Button
18 | 				variant="text"
19 | 				isFullWidth
20 | 				onClick={() => onTagAdd(content, color)}
21 | 			>
22 | 				<Padding px="md">
23 | 					<Stack spacing="sm" isHorizontal>
24 | 						<div>Create</div>
25 | 						<Tag content={content} color={color} maxWidth="120px" />
26 | 					</Stack>
27 | 				</Padding>
28 | 			</Button>
29 | 		</div>
30 | 	);
31 | }
32 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/search-bar/index.tsx:
--------------------------------------------------------------------------------
 1 | import Button from "src/react/shared/button";
 2 | import Icon from "src/react/shared/icon";
 3 | import Stack from "src/react/shared/stack";
 4 | import Input from "src/react/shared/input";
 5 | 
 6 | import { useLoomState } from "src/react/loom-app/loom-state-provider";
 7 | 
 8 | export default function SearchBar() {
 9 | 	const { searchText, setSearchText, isSearchBarVisible, toggleSearchBar } =
10 | 		useLoomState();
11 | 
12 | 	return (
13 | 		<div className="dataloom-search-bar">
14 | 			<Stack spacing="lg" isHorizontal>
15 | 				{isSearchBarVisible && (
16 | 					<Input
17 | 						placeholder="Type to search..."
18 | 						value={searchText}
19 | 						onChange={(value) => setSearchText(value)}
20 | 					/>
21 | 				)}
22 | 				<Button
23 | 					icon={<Icon lucideId="search" />}
24 | 					ariaLabel="Search"
25 | 					onClick={() => toggleSearchBar()}
26 | 				/>
27 | 			</Stack>
28 | 		</div>
29 | 	);
30 | }
31 | 


--------------------------------------------------------------------------------
/src/react/loom-app/table/footer-cell.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { useStickyOffset } from "./hooks";
 3 | import { numToPx } from "src/shared/conversion";
 4 | 
 5 | interface Props {
 6 | 	index: number;
 7 | 	content: React.ReactNode;
 8 | 	numFrozenColumns: number;
 9 | }
10 | 
11 | export default function FooterCell({
12 | 	index,
13 | 	content,
14 | 	numFrozenColumns,
15 | }: Props) {
16 | 	const ref = React.useRef<HTMLDivElement>(null);
17 | 	const leftOffset = useStickyOffset(ref, numFrozenColumns, index);
18 | 	const shouldFreeze = index + 1 <= numFrozenColumns;
19 | 
20 | 	let className = "dataloom-cell dataloom-cell--footer";
21 | 	if (shouldFreeze)
22 | 		className += " dataloom-cell--freeze dataloom-cell--freeze-footer";
23 | 	return (
24 | 		<div
25 | 			ref={ref}
26 | 			className={className}
27 | 			style={{
28 | 				left: shouldFreeze ? numToPx(leftOffset) : undefined,
29 | 			}}
30 | 		>
31 | 			{content}
32 | 		</div>
33 | 	);
34 | }
35 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/date-format-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import MenuItem from "src/react/shared/menu-item";
 2 | import Submenu from "../../shared/submenu";
 3 | import { DateFormat } from "src/shared/loom-state/types/loom-state";
 4 | import { getDisplayNameForDateFormat } from "src/shared/loom-state/type-display-names";
 5 | 
 6 | interface Props {
 7 | 	title: string;
 8 | 	value: DateFormat;
 9 | 	onValueClick: (value: DateFormat) => void;
10 | 	onBackClick: () => void;
11 | }
12 | 
13 | export default function DateFormatSubmenu({
14 | 	title,
15 | 	value,
16 | 	onValueClick,
17 | 	onBackClick,
18 | }: Props) {
19 | 	return (
20 | 		<Submenu title={title} onBackClick={onBackClick}>
21 | 			{Object.values(DateFormat).map((format) => (
22 | 				<MenuItem
23 | 					key={format}
24 | 					name={getDisplayNameForDateFormat(format)}
25 | 					onClick={() => onValueClick(format)}
26 | 					isSelected={format === value}
27 | 				/>
28 | 			))}
29 | 		</Submenu>
30 | 	);
31 | }
32 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/more-menu/settings-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import Padding from "src/react/shared/padding";
 2 | import Stack from "src/react/shared/stack";
 3 | import Submenu from "src/react/shared/submenu";
 4 | import Switch from "src/react/shared/switch";
 5 | import Text from "src/react/shared/text";
 6 | 
 7 | interface Props {
 8 | 	showCalculationRow: boolean;
 9 | 	onCalculationRowToggle: (value: boolean) => void;
10 | 	onBackClick: () => void;
11 | }
12 | 
13 | export default function SettingsSubmenu({
14 | 	showCalculationRow,
15 | 	onCalculationRowToggle,
16 | 	onBackClick,
17 | }: Props) {
18 | 	return (
19 | 		<Submenu title="Settings" onBackClick={onBackClick}>
20 | 			<Padding px="lg" py="md">
21 | 				<Stack isHorizontal spacing="lg">
22 | 					<Text value="Calculation row" />
23 | 					<Switch
24 | 						value={showCalculationRow}
25 | 						onToggle={onCalculationRowToggle}
26 | 					/>
27 | 				</Stack>
28 | 			</Padding>
29 | 		</Submenu>
30 | 	);
31 | }
32 | 


--------------------------------------------------------------------------------
/src/react/shared/flex/index.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	AlignItems,
 3 | 	FlexDirection,
 4 | 	JustifyContent,
 5 | } from "src/shared/render/types";
 6 | 
 7 | import "./styles.css";
 8 | 
 9 | interface Props {
10 | 	grow?: boolean;
11 | 	flexDir?: FlexDirection;
12 | 	justify?: JustifyContent;
13 | 	align?: AlignItems;
14 | 	wrap?: "wrap" | "nowrap";
15 | 	width?: string;
16 | 	height?: string;
17 | 	children: React.ReactNode;
18 | }
19 | 
20 | export default function Flex({
21 | 	grow = false,
22 | 	flexDir = "row",
23 | 	justify = "flex-start",
24 | 	align = "flex-start",
25 | 	wrap = "wrap",
26 | 	width,
27 | 	height,
28 | 	children,
29 | }: Props) {
30 | 	return (
31 | 		<div
32 | 			className="dataloom-flex"
33 | 			style={{
34 | 				flexGrow: grow ? 1 : 0,
35 | 				flexDirection: flexDir,
36 | 				justifyContent: justify,
37 | 				alignItems: align,
38 | 				flexWrap: wrap,
39 | 				width,
40 | 				height,
41 | 			}}
42 | 		>
43 | 			{children}
44 | 		</div>
45 | 	);
46 | }
47 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/row-add-command.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	createCellForType,
 3 | 	createRow,
 4 | } from "src/shared/loom-state/loom-state-factory";
 5 | import LoomStateCommand from "./loom-state-command";
 6 | import { Row, LoomState } from "../types/loom-state";
 7 | 
 8 | export default class RowAddCommand extends LoomStateCommand {
 9 | 	private addedRow: Row;
10 | 
11 | 	constructor() {
12 | 		super(true);
13 | 	}
14 | 
15 | 	execute(prevState: LoomState): LoomState {
16 | 		const { rows, columns } = prevState.model;
17 | 
18 | 		const cells = columns.map((column) => {
19 | 			const { id, type } = column;
20 | 			return createCellForType(id, type);
21 | 		});
22 | 		this.addedRow = createRow(rows.length, { cells });
23 | 
24 | 		const nextState = {
25 | 			...prevState,
26 | 			model: {
27 | 				...prevState.model,
28 | 				rows: [...rows, this.addedRow],
29 | 			},
30 | 		};
31 | 		this.finishExecute(prevState, nextState);
32 | 		return nextState;
33 | 	}
34 | }
35 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-16.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { SourceType } from "../types/loom-state-15";
 3 | import { Source } from "../types/loom-state-16";
 4 | import { LoomState15, LoomState16 } from "../types";
 5 | 
 6 | /**
 7 |  * Migrates to 8.11.0
 8 |  */
 9 | export default class MigrateState16 implements MigrateState {
10 | 	public migrate(prevState: LoomState15): LoomState16 {
11 | 		const { sources } = prevState.model;
12 | 
13 | 		const nextSources: Source[] = sources.map((source) => {
14 | 			if (source.type === SourceType.FOLDER) {
15 | 				const { id, path, type } = source;
16 | 				return {
17 | 					id,
18 | 					path,
19 | 					type,
20 | 					//Set default value
21 | 					includeSubfolders: true,
22 | 				};
23 | 			}
24 | 			return source;
25 | 		});
26 | 
27 | 		return {
28 | 			...prevState,
29 | 			model: {
30 | 				...prevState.model,
31 | 				sources: nextSources,
32 | 			},
33 | 		};
34 | 	}
35 | }
36 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-8.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState8 } from "../types/loom-state-8";
 3 | import {
 4 | 	LoomState9,
 5 | 	AspectRatio as AspectRatio9,
 6 | 	PaddingSize as PaddingSize9,
 7 | 	Column as Column9,
 8 | } from "../types/loom-state-9";
 9 | 
10 | /**
11 |  * Migrates to 6.17.0
12 |  */
13 | export default class MigrateState8 implements MigrateState {
14 | 	public migrate(prevState: LoomState8): LoomState9 {
15 | 		const { columns } = prevState.model;
16 | 
17 | 		const nextColumns: Column9[] = columns.map((column) => {
18 | 			return {
19 | 				...column,
20 | 				isLocked: false,
21 | 				aspectRatio: AspectRatio9.SIXTEEN_BY_NINE,
22 | 				horizontalPadding: PaddingSize9.UNSET,
23 | 				verticalPadding: PaddingSize9.UNSET,
24 | 			};
25 | 		});
26 | 
27 | 		return {
28 | 			...prevState,
29 | 			model: {
30 | 				...prevState.model,
31 | 				columns: nextColumns,
32 | 			},
33 | 		};
34 | 	}
35 | }
36 | 


--------------------------------------------------------------------------------
/src/shared/date/date-string-conversion.ts:
--------------------------------------------------------------------------------
 1 | import dayjs from "dayjs";
 2 | import { getDateFormatString, getTimeFormatString } from "./utils";
 3 | import {
 4 | 	DateFormat,
 5 | 	DateFormatSeparator,
 6 | } from "../loom-state/types/loom-state";
 7 | import customParseFormat from "dayjs/plugin/customParseFormat";
 8 | 
 9 | dayjs.extend(customParseFormat);
10 | 
11 | export const dateStringToDateTime = (
12 | 	dateString: string,
13 | 	format: DateFormat,
14 | 	separator: DateFormatSeparator,
15 | 	options?: {
16 | 		timeString: string;
17 | 		hour12: boolean;
18 | 	}
19 | ) => {
20 | 	const { timeString, hour12 = false } = options ?? {};
21 | 
22 | 	let convertString = dateString;
23 | 	let dayJSFormat = getDateFormatString(format, separator);
24 | 	if (timeString) {
25 | 		dayJSFormat += " " + getTimeFormatString(hour12);
26 | 		convertString += " " + timeString;
27 | 	}
28 | 	const dayjsDate = dayjs(convertString, dayJSFormat, true);
29 | 	return dayjsDate.toISOString();
30 | };
31 | 


--------------------------------------------------------------------------------
/src/react/loom-app/table/body-cell.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { useStickyOffset } from "./hooks";
 3 | import { numToPx } from "src/shared/conversion";
 4 | 
 5 | interface Props {
 6 | 	rowId: string;
 7 | 	index: number;
 8 | 	numFrozenColumns: number;
 9 | 	contentNode: React.ReactNode;
10 | }
11 | 
12 | export default function BodyCell({
13 | 	rowId,
14 | 	index,
15 | 	numFrozenColumns,
16 | 	contentNode,
17 | }: Props) {
18 | 	const ref = React.useRef<HTMLDivElement>(null);
19 | 	const leftOffset = useStickyOffset(ref, numFrozenColumns, index);
20 | 	const shouldFreeze = index + 1 <= numFrozenColumns;
21 | 
22 | 	let className = "dataloom-cell dataloom-cell--body";
23 | 	if (shouldFreeze) className += " dataloom-cell--freeze";
24 | 	return (
25 | 		<div
26 | 			className={className}
27 | 			ref={ref}
28 | 			data-row-id={index === 0 ? rowId : undefined}
29 | 			style={{ left: shouldFreeze ? numToPx(leftOffset) : undefined }}
30 | 		>
31 | 			{contentNode}
32 | 		</div>
33 | 	);
34 | }
35 | 


--------------------------------------------------------------------------------
/src/react/shared/submenu/index.tsx:
--------------------------------------------------------------------------------
 1 | import Button from "src/react/shared/button";
 2 | import Divider from "src/react/shared/divider";
 3 | import Icon from "src/react/shared/icon";
 4 | import Padding from "src/react/shared/padding";
 5 | import Stack from "src/react/shared/stack";
 6 | 
 7 | interface Props {
 8 | 	title: string;
 9 | 	showBackButton?: boolean;
10 | 	children: React.ReactNode;
11 | 	onBackClick: () => void;
12 | }
13 | 
14 | export default function Submenu({
15 | 	title,
16 | 	showBackButton = true,
17 | 	children,
18 | 	onBackClick,
19 | }: Props) {
20 | 	return (
21 | 		<Padding p="sm">
22 | 			<Stack spacing="md">
23 | 				<Stack isHorizontal>
24 | 					{showBackButton && (
25 | 						<Button
26 | 							icon={<Icon lucideId="arrow-left" />}
27 | 							onClick={() => {
28 | 								onBackClick();
29 | 							}}
30 | 						/>
31 | 					)}
32 | 					<Padding pr="md">{title}</Padding>
33 | 				</Stack>
34 | 				<Divider />
35 | 			</Stack>
36 | 			{children}
37 | 		</Padding>
38 | 	);
39 | }
40 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-14.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import {
 3 | 	Column as Column15,
 4 | 	LoomState15,
 5 | 	Row as Row15,
 6 | } from "../types/loom-state-15";
 7 | import { LoomState14 } from "../types/loom-state-14";
 8 | 
 9 | /**
10 |  * Migrates to 8.7.0
11 |  */
12 | export default class MigrateState14 implements MigrateState {
13 | 	public migrate(prevState: LoomState14): LoomState15 {
14 | 		const { rows, columns } = prevState.model;
15 | 		const nextRows: Row15[] = rows.map((row) => {
16 | 			return {
17 | 				...row,
18 | 				sourceId: null,
19 | 			};
20 | 		});
21 | 
22 | 		const newColumns: Column15[] = columns.map((column) => {
23 | 			return {
24 | 				...column,
25 | 				frontmatterKey: null,
26 | 			};
27 | 		});
28 | 
29 | 		return {
30 | 			...prevState,
31 | 			model: {
32 | 				...prevState.model,
33 | 				rows: nextRows,
34 | 				columns: newColumns,
35 | 				sources: [],
36 | 				externalRowOrder: [],
37 | 			},
38 | 		};
39 | 	}
40 | }
41 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/utils/column-utils.ts:
--------------------------------------------------------------------------------
 1 | import ColumnNotFoundError from "src/shared/error/column-not-found-error";
 2 | import RowNotFoundError from "../../error/row-not-found-error";
 3 | import { Cell, Column, Row } from "../types/loom-state";
 4 | 
 5 | export const getColumnCells = (rows: Row[], columnId: string): Cell[] => {
 6 | 	return rows.map((row) => {
 7 | 		const { cells } = row;
 8 | 		const cell = cells.find((cell) => cell.columnId === columnId);
 9 | 		if (!cell) throw new RowNotFoundError(row.id);
10 | 		return cell;
11 | 	});
12 | };
13 | 
14 | export const mapCellsToColumn = (columns: Column[], rows: Row[]) => {
15 | 	const cellsToColumn = new Map<string, Column>();
16 | 	const cells = rows.flatMap((row) => row.cells);
17 | 	cells.forEach((cell) => {
18 | 		const column = columns.find((column) => column.id === cell.columnId);
19 | 		if (!column) throw new ColumnNotFoundError({ id: cell.columnId });
20 | 		cellsToColumn.set(cell.columnId, column);
21 | 	});
22 | 	return cellsToColumn;
23 | };
24 | 


--------------------------------------------------------------------------------
/src/shared/export/export-to-markdown.tsx:
--------------------------------------------------------------------------------
 1 | import { LoomState } from "../loom-state/types/loom-state";
 2 | import { markdownTable } from "markdown-table";
 3 | import { loomStateToArray } from "./loom-state-to-array";
 4 | import { App } from "obsidian";
 5 | import {
 6 | 	escapePipeCharacters,
 7 | 	replaceNewLinesWithBreaks,
 8 | } from "./export-utils";
 9 | 
10 | export const exportToMarkdown = (
11 | 	app: App,
12 | 	loomState: LoomState,
13 | 	shouldRemoveMarkdown: boolean
14 | ): string => {
15 | 	let arr = loomStateToArray(app, loomState, shouldRemoveMarkdown);
16 | 
17 | 	//Markdown table cells can't contain new lines, so we replace them with <br> tags
18 | 	arr = arr.map((row) => row.map((cell) => replaceNewLinesWithBreaks(cell)));
19 | 
20 | 	//Markdown table cells can't contain pipe characters, so we escape them
21 | 	//Obsidian will render the escaped pipe characters as normal pipe characters
22 | 	arr = arr.map((row) => row.map((cell) => escapePipeCharacters(cell)));
23 | 	return markdownTable(arr);
24 | };
25 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Release
 2 | on:
 3 |     push:
 4 |         tags:
 5 |             - "*"
 6 | jobs:
 7 |     build:
 8 |         runs-on: ubuntu-latest
 9 |         steps:
10 |             - uses: actions/checkout@v2
11 |             - name: Use Node.js
12 |               uses: actions/setup-node@v1
13 |               with:
14 |                   node-version: "16.x"
15 |             - name: Build
16 |               id: build
17 |               run: |
18 |                   npm install
19 |                   npm run build
20 |             # Create the release on github
21 |             - name: Release
22 |               uses: softprops/action-gh-release@v1
23 |               if: startsWith(github.ref, 'refs/tags/')
24 |               with:
25 |                   name: ${{  github.ref_name }}
26 |                   tag_name: ${{ github.ref }}
27 |                   files: |
28 |                       dist/main.js
29 |                       dist/manifest.json
30 |                       dist/styles.css
31 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-table-settings.ts:
--------------------------------------------------------------------------------
 1 | import { useLoomState } from "../../loom-state-provider";
 2 | import TableSettingsUpdateCommand from "src/shared/loom-state/commands/table-settings-update-command";
 3 | import React from "react";
 4 | import Logger from "js-logger";
 5 | 
 6 | export const useTableSettings = () => {
 7 | 	const { doCommand } = useLoomState();
 8 | 
 9 | 	const handleFrozenColumnsChange = React.useCallback(
10 | 		(numColumns: number) => {
11 | 			Logger.trace("handleFrozenColumnsChange", { numColumns });
12 | 			doCommand(
13 | 				new TableSettingsUpdateCommand("numFrozenColumns", numColumns)
14 | 			);
15 | 		},
16 | 		[doCommand]
17 | 	);
18 | 
19 | 	function handleCalculationRowToggle(value: boolean) {
20 | 		Logger.trace("handleCalculationRowToggle");
21 | 		doCommand(new TableSettingsUpdateCommand("showCalculationRow", value));
22 | 	}
23 | 
24 | 	return {
25 | 		onFrozenColumnsChange: handleFrozenColumnsChange,
26 | 		onCalculationRowToggle: handleCalculationRowToggle,
27 | 	};
28 | };
29 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/text-cell-content.ts:
--------------------------------------------------------------------------------
 1 | import markdownIt from "markdown-it";
 2 | import { WIKI_LINK_REGEX } from "src/data/constants";
 3 | import * as htmlparser2 from "htmlparser2";
 4 | 
 5 | const getInnerHTML = (htmlText: string) => {
 6 | 	let allInnerText = "";
 7 | 
 8 | 	const parser = new htmlparser2.Parser({
 9 | 		ontext: (text) => {
10 | 			allInnerText += text;
11 | 		},
12 | 	});
13 | 
14 | 	parser.write(htmlText);
15 | 	parser.end();
16 | 	return allInnerText.trim();
17 | };
18 | 
19 | const markdownToHTML = (markdown: string) => {
20 | 	const md = markdownIt();
21 | 	return md.render(markdown);
22 | };
23 | 
24 | export const getTextCellContent = (
25 | 	content: string,
26 | 	shouldRemoveMarkdown: boolean
27 | ) => {
28 | 	if (shouldRemoveMarkdown) {
29 | 		const replaced = content.replace(
30 | 			WIKI_LINK_REGEX,
31 | 			(_match, path) => path
32 | 		);
33 | 		const html = markdownToHTML(replaced);
34 | 		const innerHTML = getInnerHTML(html);
35 | 		return innerHTML;
36 | 	}
37 | 	return content;
38 | };
39 | 


--------------------------------------------------------------------------------
/src/react/shared/multi-select/multi-select-option.tsx:
--------------------------------------------------------------------------------
 1 | import Stack from "../stack";
 2 | 
 3 | interface Props {
 4 | 	id: string;
 5 | 	isChecked: boolean;
 6 | 	component: React.ReactNode;
 7 | 	handleOptionClick: (id: string) => void;
 8 | }
 9 | 
10 | export default function MultiSelectOption({
11 | 	id,
12 | 	isChecked,
13 | 	component,
14 | 	handleOptionClick,
15 | }: Props) {
16 | 	function handleKeyDown(e: React.KeyboardEvent) {
17 | 		if (e.key === "Enter") {
18 | 			e.stopPropagation();
19 | 			handleOptionClick(id);
20 | 		}
21 | 	}
22 | 
23 | 	return (
24 | 		<div
25 | 			className="dataloom-multi-select__option dataloom-focusable dataloom-selectable"
26 | 			tabIndex={0}
27 | 			onKeyDown={handleKeyDown}
28 | 			onClick={() => handleOptionClick(id)}
29 | 		>
30 | 			<Stack isHorizontal width="100%">
31 | 				<input
32 | 					className="task-list-item-checkbox"
33 | 					type="checkbox"
34 | 					checked={isChecked}
35 | 					onChange={() => {}}
36 | 				/>
37 | 				{component}
38 | 			</Stack>
39 | 		</div>
40 | 	);
41 | }
42 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/date-format-separator-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import MenuItem from "src/react/shared/menu-item";
 2 | import Submenu from "../../shared/submenu";
 3 | import { DateFormatSeparator } from "src/shared/loom-state/types/loom-state";
 4 | import { getDisplayNameForDateFormatSeparator } from "src/shared/loom-state/type-display-names";
 5 | 
 6 | interface Props {
 7 | 	title: string;
 8 | 	value: DateFormatSeparator;
 9 | 	onValueClick: (value: DateFormatSeparator) => void;
10 | 	onBackClick: () => void;
11 | }
12 | 
13 | export default function DateFormatSeparatorSubmenu({
14 | 	title,
15 | 	value,
16 | 	onValueClick,
17 | 	onBackClick,
18 | }: Props) {
19 | 	return (
20 | 		<Submenu title={title} onBackClick={onBackClick}>
21 | 			{Object.values(DateFormatSeparator).map((format) => (
22 | 				<MenuItem
23 | 					key={format}
24 | 					name={getDisplayNameForDateFormatSeparator(format)}
25 | 					onClick={() => onValueClick(format)}
26 | 					isSelected={format === value}
27 | 				/>
28 | 			))}
29 | 		</Submenu>
30 | 	);
31 | }
32 | 


--------------------------------------------------------------------------------
/src/react/shared/select/index.tsx:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | 
 3 | interface Props {
 4 | 	id?: string;
 5 | 	isDisabled?: boolean;
 6 | 	hasError?: boolean;
 7 | 	className?: string;
 8 | 	value: string;
 9 | 	onKeyDown?: (e: React.KeyboardEvent<HTMLSelectElement>) => void;
10 | 	onChange: (value: string) => void;
11 | 	children: React.ReactNode;
12 | }
13 | 
14 | export default function Select({
15 | 	id,
16 | 	isDisabled,
17 | 	hasError,
18 | 	className: customClassName,
19 | 	value,
20 | 	onChange,
21 | 	onKeyDown,
22 | 	children,
23 | }: Props) {
24 | 	let className = "dataloom-select dataloom-focusable";
25 | 	if (customClassName) {
26 | 		className += " " + customClassName;
27 | 	}
28 | 	if (hasError) {
29 | 		className += " dataloom-select--error";
30 | 	}
31 | 	return (
32 | 		<select
33 | 			disabled={isDisabled}
34 | 			id={id}
35 | 			tabIndex={0}
36 | 			className={className}
37 | 			value={value}
38 | 			onChange={(e) => onChange(e.target.value)}
39 | 			onKeyDown={onKeyDown}
40 | 		>
41 | 			{children}
42 | 		</select>
43 | 	);
44 | }
45 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/column-add-command/utils.ts:
--------------------------------------------------------------------------------
 1 | import { createCellForType, createColumn } from "../../loom-state-factory";
 2 | import { CellType, Column, Row } from "../../types/loom-state";
 3 | 
 4 | export const columnAddExecute = (
 5 | 	prevColumns: Column[],
 6 | 	prevRows: Row[],
 7 | 	options?: {
 8 | 		type?: CellType;
 9 | 		insertIndex?: number;
10 | 		content?: string;
11 | 	}
12 | ) => {
13 | 	const { type = CellType.TEXT, insertIndex, content } = options ?? {};
14 | 
15 | 	const nextColumns = [...prevColumns];
16 | 
17 | 	const newColumn = createColumn({
18 | 		type,
19 | 		content,
20 | 	});
21 | 	nextColumns.splice(insertIndex ?? prevColumns.length, 0, newColumn);
22 | 
23 | 	const nextRows: Row[] = prevRows.map((row) => {
24 | 		const { cells } = row;
25 | 		const newCell = createCellForType(newColumn.id, type);
26 | 		const nextCells = [...cells, newCell];
27 | 		return {
28 | 			...row,
29 | 			cells: nextCells,
30 | 		};
31 | 	});
32 | 
33 | 	return {
34 | 		columns: nextColumns,
35 | 		rows: nextRows,
36 | 	};
37 | };
38 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/row-reorder-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import RowReorderCommand from "./row-reorder-command";
 2 | import { createLoomState } from "../loom-state-factory";
 3 | 
 4 | describe("row-reorder-command", () => {
 5 | 	it("moves the last row to the first row index when execute() is called", async () => {
 6 | 		//Arrange
 7 | 		const prevState = createLoomState(1, 3);
 8 | 		const firstRow = prevState.model.rows[0].id;
 9 | 		const lastRow = prevState.model.rows[2].id;
10 | 		const command = new RowReorderCommand(lastRow, firstRow);
11 | 
12 | 		//Act
13 | 		const executeState = command.execute(prevState);
14 | 
15 | 		//Assert
16 | 		expect(executeState.model.rows[0].id).toEqual(lastRow);
17 | 		expect(executeState.model.rows[1].id).toEqual(firstRow);
18 | 		expect(executeState.model.rows[2].id).toEqual(
19 | 			prevState.model.rows[1].id
20 | 		);
21 | 		expect(executeState.model.rows[0].index).toEqual(0);
22 | 		expect(executeState.model.rows[1].index).toEqual(1);
23 | 		expect(executeState.model.rows[2].index).toEqual(2);
24 | 	});
25 | });
26 | 


--------------------------------------------------------------------------------
/src/shared/date/utils.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	DateFormat,
 3 | 	DateFormatSeparator,
 4 | } from "../loom-state/types/loom-state";
 5 | 
 6 | export const getDateFormatString = (
 7 | 	format: DateFormat,
 8 | 	separator: DateFormatSeparator
 9 | ) => {
10 | 	switch (format) {
11 | 		case DateFormat.MM_DD_YYYY:
12 | 			return `MM${separator}DD${separator}YYYY`;
13 | 		case DateFormat.DD_MM_YYYY:
14 | 			return `DD${separator}MM${separator}YYYY`;
15 | 		case DateFormat.YYYY_MM_DD:
16 | 			return `YYYY${separator}MM${separator}DD`;
17 | 		default:
18 | 			throw new Error("Date format not supported.");
19 | 	}
20 | };
21 | 
22 | export const getTimeFormatString = (hour12: boolean) => {
23 | 	return hour12 ? "h:mm A" : "HH:mm";
24 | };
25 | 
26 | export const getDateTimeFromUnixTime = (unixTime: number) => {
27 | 	return new Date(unixTime).toISOString();
28 | };
29 | 
30 | export const getCurrentDateTime = () => {
31 | 	return new Date().toISOString();
32 | };
33 | 
34 | export const padToTwoDigits = (value: string | number) => {
35 | 	return ("0" + value).slice(-2);
36 | };
37 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-20.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState20 } from "../types";
 3 | import { LoomState19, SourceType } from "../types/loom-state-19";
 4 | import { getFilterConditionsForPropertyType } from "src/react/loom-app/option-bar/sources-menu/add-source-submenu/utils";
 5 | 
 6 | /**
 7 |  * Migrates to 8.15.1
 8 |  */
 9 | export default class MigrateState20 implements MigrateState {
10 | 	public migrate(prevState: LoomState19): LoomState20 {
11 | 		const { sources } = prevState.model;
12 | 
13 | 		const nextSources = sources.map((source) => {
14 | 			const { type } = source;
15 | 			if (type === SourceType.FRONTMATTER) {
16 | 				const { propertyType } = source;
17 | 				return {
18 | 					...source,
19 | 					filterCondition:
20 | 						getFilterConditionsForPropertyType(propertyType)[0],
21 | 				};
22 | 			}
23 | 			return source;
24 | 		});
25 | 
26 | 		return {
27 | 			...prevState,
28 | 			model: {
29 | 				...prevState.model,
30 | 				sources: nextSources,
31 | 			},
32 | 		};
33 | 	}
34 | }
35 | 


--------------------------------------------------------------------------------
/src/obsidian/editing-view-plugin.tsx:
--------------------------------------------------------------------------------
 1 | import { PluginValue, ViewPlugin, ViewUpdate } from "@codemirror/view";
 2 | 
 3 | import { loadEmbeddedLoomApps } from "./embedded/embedded-app-manager";
 4 | import { App } from "obsidian";
 5 | 
 6 | export default function EditingViewPlugin(app: App, pluginVersion: string) {
 7 | 	return ViewPlugin.fromClass(
 8 | 		/**
 9 | 		 * This plugin is responsible for rendering the loom app in live preview mode.
10 | 		 * It is instantiated for each open leaf
11 | 		 */
12 | 		class EditingViewPlugin implements PluginValue {
13 | 			/**
14 | 			 * Called whenever the markdown of the current leaf is updated.
15 | 			 */
16 | 			update(update: ViewUpdate) {
17 | 				const markdownLeaves =
18 | 					app.workspace.getLeavesOfType("markdown");
19 | 				const activeLeaf = markdownLeaves.find(
20 | 					//@ts-expect-error - private property
21 | 					(leaf) => leaf.view.editor.cm === update.view
22 | 				);
23 | 				if (!activeLeaf) return;
24 | 				loadEmbeddedLoomApps(app, pluginVersion, activeLeaf, "source");
25 | 			}
26 | 		}
27 | 	);
28 | }
29 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/text-input-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Submenu from "../../shared/submenu";
 3 | import Input from "../../shared/input";
 4 | import { LoomMenuCloseRequest } from "src/react/shared/menu-provider/types";
 5 | 
 6 | interface Props {
 7 | 	title: string;
 8 | 	value: string;
 9 | 	onValueChange: (value: string) => void;
10 | 	onBackClick: () => void;
11 | 	closeRequest: LoomMenuCloseRequest | null;
12 | 	onClose: () => void;
13 | }
14 | 
15 | export default function TextInputSubmenu({
16 | 	title,
17 | 	value,
18 | 	onValueChange,
19 | 	onBackClick,
20 | 	closeRequest,
21 | 	onClose,
22 | }: Props) {
23 | 	const [textValue, setTextValue] = React.useState(value);
24 | 
25 | 	React.useEffect(() => {
26 | 		if (closeRequest !== null) {
27 | 			onValueChange(textValue);
28 | 			onClose();
29 | 		}
30 | 	}, [onValueChange, textValue, closeRequest, onClose]);
31 | 
32 | 	return (
33 | 		<Submenu title={title} onBackClick={onBackClick}>
34 | 			<Input value={textValue} onChange={setTextValue} />
35 | 		</Submenu>
36 | 	);
37 | }
38 | 


--------------------------------------------------------------------------------
/src/react/shared/stepper/step-header.tsx:
--------------------------------------------------------------------------------
 1 | import Stack from "../stack";
 2 | import StepIndicator from "./step-indicator";
 3 | import StepText from "./step-text";
 4 | 
 5 | interface Props {
 6 | 	title: string;
 7 | 	description?: string;
 8 | 	index: number;
 9 | 	activeIndex: number;
10 | 	onClick: (index: number) => void;
11 | }
12 | 
13 | export default function StepHeader({
14 | 	title,
15 | 	description,
16 | 	index,
17 | 	activeIndex,
18 | 	onClick,
19 | }: Props) {
20 | 	let className = "dataloom-step__header";
21 | 	if (description === undefined) {
22 | 		className += " dataloom-step__header--margin-bottom";
23 | 	}
24 | 	const isComplete = activeIndex > index;
25 | 	return (
26 | 		<div className={className}>
27 | 			<Stack isHorizontal>
28 | 				<StepIndicator
29 | 					index={index}
30 | 					isComplete={isComplete}
31 | 					onClick={() => onClick(index)}
32 | 				/>
33 | 				<StepText
34 | 					title={title}
35 | 					description={description}
36 | 					isComplete={isComplete}
37 | 					onClick={() => onClick(index)}
38 | 				/>
39 | 			</Stack>
40 | 		</div>
41 | 	);
42 | }
43 | 


--------------------------------------------------------------------------------
/src/react/loom-app/date-cell-edit/time-format.menu.tsx:
--------------------------------------------------------------------------------
 1 | import Menu from "src/react/shared/menu";
 2 | import MenuItem from "src/react/shared/menu-item";
 3 | import { LoomMenuPosition } from "src/react/shared/menu/types";
 4 | 
 5 | interface Props {
 6 | 	id: string;
 7 | 	isOpen: boolean;
 8 | 	position: LoomMenuPosition;
 9 | 	value: boolean;
10 | 	onChange: (value: boolean) => void;
11 | }
12 | 
13 | export default function TimeFormatMenu({
14 | 	id,
15 | 	position,
16 | 	isOpen,
17 | 	value,
18 | 	onChange,
19 | }: Props) {
20 | 	return (
21 | 		<Menu
22 | 			isOpen={isOpen}
23 | 			id={id}
24 | 			position={position}
25 | 			width={175}
26 | 			topOffset={10}
27 | 			leftOffset={75}
28 | 		>
29 | 			<div className="dataloom-time-format-menu">
30 | 				<MenuItem
31 | 					name="12 hour"
32 | 					isSelected={value}
33 | 					onClick={() => {
34 | 						onChange(true);
35 | 					}}
36 | 				/>
37 | 				<MenuItem
38 | 					name="24 hour"
39 | 					isSelected={!value}
40 | 					onClick={() => {
41 | 						onChange(false);
42 | 					}}
43 | 				/>
44 | 			</div>
45 | 		</Menu>
46 | 	);
47 | }
48 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/filter-menu/filter-condition-select.tsx:
--------------------------------------------------------------------------------
 1 | import Select from "src/react/shared/select";
 2 | import { getDisplayNameForFilterCondition } from "src/shared/loom-state/type-display-names";
 3 | import { FilterCondition } from "src/shared/loom-state/types/loom-state";
 4 | 
 5 | interface Props {
 6 | 	id: string;
 7 | 	options: FilterCondition[];
 8 | 	value: FilterCondition;
 9 | 	onChange: (id: string, value: FilterCondition) => void;
10 | }
11 | 
12 | export default function FilterConditionSelect({
13 | 	id,
14 | 	value,
15 | 	options,
16 | 	onChange,
17 | }: Props) {
18 | 	function handleKeyDown(e: React.KeyboardEvent) {
19 | 		if (e.key === "Enter") {
20 | 			e.stopPropagation();
21 | 		}
22 | 	}
23 | 
24 | 	return (
25 | 		<Select
26 | 			value={value}
27 | 			onKeyDown={handleKeyDown}
28 | 			onChange={(newValue) => onChange(id, newValue as FilterCondition)}
29 | 		>
30 | 			{options.map((option) => (
31 | 				<option key={option} value={option}>
32 | 					{getDisplayNameForFilterCondition(option)}
33 | 				</option>
34 | 			))}
35 | 		</Select>
36 | 	);
37 | }
38 | 


--------------------------------------------------------------------------------
/src/react/shared/menu-provider/factory.ts:
--------------------------------------------------------------------------------
 1 | import { generateUuid } from "src/shared/uuid";
 2 | import {
 3 | 	LoomMenuLevel,
 4 | 	LoomMenu,
 5 | 	LoomMenuCloseRequest,
 6 | 	LoomMenuCloseRequestType,
 7 | } from "./types";
 8 | import { LoomMenuPosition } from "../menu/types";
 9 | 
10 | export const createMenu = (
11 | 	parentComponentId: string,
12 | 	level: LoomMenuLevel,
13 | 	position: LoomMenuPosition,
14 | 	options?: {
15 | 		name?: string;
16 | 		shouldRequestOnClose?: boolean;
17 | 		shouldFocusTriggerOnClose?: boolean;
18 | 	}
19 | ): LoomMenu => {
20 | 	const {
21 | 		shouldRequestOnClose = false,
22 | 		shouldFocusTriggerOnClose = true,
23 | 		name,
24 | 	} = options ?? {};
25 | 	return {
26 | 		id: "m" + generateUuid(),
27 | 		parentComponentId,
28 | 		...(name && { name }),
29 | 		position,
30 | 		level,
31 | 		shouldRequestOnClose,
32 | 		shouldFocusTriggerOnClose,
33 | 	};
34 | };
35 | 
36 | export const createCloseRequest = (
37 | 	menuId: string,
38 | 	type: LoomMenuCloseRequestType
39 | ): LoomMenuCloseRequest => {
40 | 	return {
41 | 		menuId,
42 | 		type,
43 | 	};
44 | };
45 | 


--------------------------------------------------------------------------------
/src/react/shared/stepper/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-step__header--margin-bottom {
 2 |     margin-bottom: 5px;
 3 | }
 4 | 
 5 | .dataloom-step__content {
 6 |     width: 100%;
 7 |     margin-top: 10px;
 8 | }
 9 | 
10 | .dataloom-step__content--margin-top {
11 |     margin-top: 25px;
12 | }
13 | 
14 | .dataloom-step__indicator {
15 |     width: 30px;
16 |     height: 30px;
17 |     border-radius: 50%;
18 |     background-color: var(--background-secondary);
19 | }
20 | 
21 | .dataloom-step__indicator--complete {
22 |     cursor: pointer;
23 | }
24 | 
25 | .dataloom-step__text--complete {
26 |     cursor: pointer;
27 | }
28 | 
29 | .dataloom-step__spacer {
30 |     width: 100%;
31 |     height: 25px;
32 |     margin-left: 15px;
33 |     margin-bottom: 10px;
34 |     border-left: 1px solid var(--background-modifier-border);
35 | }
36 | 
37 | .dataloom-step__separator {
38 |     min-width: 15px;
39 |     margin-left: 15px;
40 |     border-left: 1px solid var(--background-modifier-border);
41 |     align-self: stretch;
42 | }
43 | 
44 | .dataloom-step__separator--no-border {
45 |     border-left: none;
46 | }


--------------------------------------------------------------------------------
/src/react/loom-app/app-mount-provider/index.tsx:
--------------------------------------------------------------------------------
 1 | import { App, TFile, WorkspaceLeaf } from "obsidian";
 2 | 
 3 | import React from "react";
 4 | 
 5 | interface ContextProps {
 6 | 	app: App;
 7 | 	mountLeaf: WorkspaceLeaf;
 8 | 	reactAppId: string;
 9 | 	loomFile: TFile;
10 | 	isMarkdownView: boolean;
11 | }
12 | 
13 | const MountContext = React.createContext<ContextProps | null>(null);
14 | 
15 | export const useAppMount = () => {
16 | 	const value = React.useContext(MountContext);
17 | 	if (value === null) {
18 | 		throw new Error(
19 | 			"useAppMount() called without a <AppMountProvider /> in the tree."
20 | 		);
21 | 	}
22 | 
23 | 	return value;
24 | };
25 | 
26 | interface Props extends ContextProps {
27 | 	children: React.ReactNode;
28 | }
29 | 
30 | export default function AppMountProvider({
31 | 	app,
32 | 	reactAppId,
33 | 	mountLeaf,
34 | 	loomFile,
35 | 	isMarkdownView,
36 | 	children,
37 | }: Props) {
38 | 	return (
39 | 		<MountContext.Provider
40 | 			value={{ app, reactAppId, mountLeaf, loomFile, isMarkdownView }}
41 | 		>
42 | 			{children}
43 | 		</MountContext.Provider>
44 | 	);
45 | }
46 | 


--------------------------------------------------------------------------------
/src/react/shared/switch/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useAppSelector } from "src/redux/hooks";
 2 | import "./styles.css";
 3 | 
 4 | interface Props {
 5 | 	id?: string;
 6 | 	ariaLabel?: string;
 7 | 	value: boolean;
 8 | 	onToggle: (value: boolean) => void;
 9 | }
10 | 
11 | export default function Switch({ id, value, ariaLabel, onToggle }: Props) {
12 | 	const { isDarkMode } = useAppSelector((state) => state.global);
13 | 
14 | 	function handleKeyDown(e: React.KeyboardEvent) {
15 | 		if (e.key === "Enter") {
16 | 			e.stopPropagation();
17 | 			onToggle(!value);
18 | 		}
19 | 	}
20 | 
21 | 	function handleClick(e: React.MouseEvent) {
22 | 		e.stopPropagation();
23 | 		onToggle(!value);
24 | 	}
25 | 
26 | 	let className = "checkbox-container dataloom-switch dataloom-focusable";
27 | 	if (value) className += " is-enabled";
28 | 	if (isDarkMode) className += " dataloom-switch--dark";
29 | 	return (
30 | 		<div
31 | 			tabIndex={0}
32 | 			className={className}
33 | 			aria-label={ariaLabel}
34 | 			onClick={handleClick}
35 | 			onKeyDown={handleKeyDown}
36 | 		>
37 | 			<input id={id} type="checkbox" />
38 | 		</div>
39 | 	);
40 | }
41 | 


--------------------------------------------------------------------------------
/src/react/loom-app/embed-cell/index.tsx:
--------------------------------------------------------------------------------
 1 | import { getEmbedCellContent } from "src/shared/cell-content/embed-cell-content";
 2 | import {
 3 | 	AspectRatio,
 4 | 	PaddingSize,
 5 | } from "src/shared/loom-state/types/loom-state";
 6 | 
 7 | import Embed from "./embed";
 8 | import { useAppMount } from "../app-mount-provider";
 9 | 
10 | import "./styles.css";
11 | 
12 | interface Props {
13 | 	isExternal: boolean;
14 | 	pathOrUrl: string;
15 | 	aspectRatio: AspectRatio;
16 | 	horizontalPadding: PaddingSize;
17 | 	verticalPadding: PaddingSize;
18 | }
19 | 
20 | export default function EmbedCell({
21 | 	isExternal,
22 | 	pathOrUrl,
23 | 	aspectRatio,
24 | 	horizontalPadding,
25 | 	verticalPadding,
26 | }: Props) {
27 | 	const { app } = useAppMount();
28 | 	const content = getEmbedCellContent(app, pathOrUrl, {
29 | 		isExternal,
30 | 	});
31 | 	return (
32 | 		<div className="dataloom-embed-cell">
33 | 			<Embed
34 | 				isExternalLink={isExternal}
35 | 				content={content}
36 | 				aspectRatio={aspectRatio}
37 | 				horizontalPadding={horizontalPadding}
38 | 				verticalPadding={verticalPadding}
39 | 			/>
40 | 		</div>
41 | 	);
42 | }
43 | 


--------------------------------------------------------------------------------
/src/shared/event/utils.ts:
--------------------------------------------------------------------------------
 1 | import { findMenuTriggerEl } from "src/react/shared/menu-provider/utils";
 2 | 
 3 | export const isEventForThisApp = (
 4 | 	appId: string,
 5 | 	allowOutsideEvents = false
 6 | ) => {
 7 | 	const activeEl = document.activeElement;
 8 | 	if (!activeEl) return false;
 9 | 
10 | 	//If we have an active element that part of the app, then compare the id
11 | 	const appEl = activeEl.closest(".dataloom-app");
12 | 	if (appEl) return appEl.id === appId;
13 | 
14 | 	//We will pass on events that are outside of an app instance
15 | 	if (allowOutsideEvents) return true;
16 | 
17 | 	//Otherwise we have an active element that is part of a menu. That means that it is rendered
18 | 	//in a portal. To get the app id, we first need to get the menu, then the menu trigger, then the app
19 | 	const menuEl = activeEl.closest(".dataloom-menu");
20 | 	if (menuEl) {
21 | 		const menuId = menuEl.id;
22 | 		const menuTrigger = findMenuTriggerEl(menuId);
23 | 		if (!menuTrigger) return false;
24 | 
25 | 		const appEl = menuTrigger.closest(".dataloom-app");
26 | 		if (appEl) return appEl.id === appId;
27 | 	}
28 | 	return false;
29 | };
30 | 


--------------------------------------------------------------------------------
/src/redux/global-slice.ts:
--------------------------------------------------------------------------------
 1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 2 | import { DEFAULT_SETTINGS, DataLoomSettings } from "src/main";
 3 | 
 4 | interface GlobalState {
 5 | 	settings: DataLoomSettings;
 6 | 	isDarkMode: boolean;
 7 | 	pluginVersion: string;
 8 | }
 9 | 
10 | const initialState: GlobalState = {
11 | 	settings: DEFAULT_SETTINGS,
12 | 	isDarkMode: false,
13 | 	pluginVersion: "",
14 | };
15 | 
16 | //This is the global slice of the redux store.
17 | //This state will be shared across all dataloom instances
18 | const globalSlice = createSlice({
19 | 	name: "global",
20 | 	initialState,
21 | 	reducers: {
22 | 		setDarkMode(state, action: PayloadAction<boolean>) {
23 | 			state.isDarkMode = action.payload;
24 | 		},
25 | 		setSettings(state, action: PayloadAction<DataLoomSettings>) {
26 | 			state.settings = action.payload;
27 | 		},
28 | 		setPluginVersion(state, action: PayloadAction<string>) {
29 | 			state.pluginVersion = action.payload;
30 | 		},
31 | 	},
32 | });
33 | 
34 | export const { setDarkMode, setSettings, setPluginVersion } =
35 | 	globalSlice.actions;
36 | export default globalSlice.reducer;
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 DecafDev
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/react/shared/switch/styles.css:
--------------------------------------------------------------------------------
 1 | /** This sizes down the original Obsidian switch by 0.75 **/
 2 | .dataloom-switch {
 3 |     width: calc(var(--toggle-width) * 0.75);
 4 |     height: calc((var(--toggle-thumb-height) * 0.75) + (var(--toggle-border-width) * 2 * 0.75));
 5 |     transition: none !important;
 6 | }
 7 | 
 8 | .dataloom-switch:after {
 9 |     width: calc(var(--toggle-thumb-width) * 0.75); 
10 |     height: calc(var(--toggle-thumb-height) * 0.75);
11 | }
12 | 
13 | .dataloom-switch.is-enabled:after {
14 |     transform: translate3d(calc((var(--toggle-width) - var(--toggle-thumb-width) - var(--toggle-border-width)) * 0.75), 0, 0);
15 | }
16 | 
17 | .dataloom-switch input {
18 |     width: calc(var(--checkbox-size) * 0.75);
19 |     height: calc(var(--checkbox-size) * 0.75);
20 | }
21 | 
22 | .dataloom-switch:active:after {
23 |     width: calc((var(--toggle-thumb-width) * 0.75) + (var(--toggle-border-width)));
24 | }
25 | 
26 | .dataloom-switch:focus-visible {
27 |     outline: 2px solid var(--text-on-accent-inverted);
28 |     outline-offset: 0px;
29 | }
30 | 
31 | .dataloom-switch--dark {
32 |     outline-color: var(--text-on-accent);
33 | }


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/multitag-sort-dir-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import MenuItem from "src/react/shared/menu-item";
 2 | import Submenu from "../../shared/submenu";
 3 | import { SortDir } from "src/shared/loom-state/types/loom-state";
 4 | 
 5 | interface Props {
 6 | 	title: string;
 7 | 	value: SortDir;
 8 | 	onValueClick: (value: SortDir) => void;
 9 | 	onBackClick: () => void;
10 | }
11 | 
12 | export default function MultiTagSortDirSubmenu({
13 | 	title,
14 | 	value,
15 | 	onValueClick,
16 | 	onBackClick,
17 | }: Props) {
18 | 	return (
19 | 		<Submenu title={title} onBackClick={onBackClick}>
20 | 			<MenuItem
21 | 					key={SortDir.ASC}
22 | 					name="Ascending"
23 | 					onClick={() => onValueClick(SortDir.ASC)}
24 | 					isSelected={value === SortDir.ASC}
25 | 				/>
26 | 			<MenuItem
27 | 					key={SortDir.DESC}
28 | 					name="Descending"
29 | 					onClick={() => onValueClick(SortDir.DESC)}
30 | 					isSelected={value === SortDir.DESC}
31 | 				/>
32 | 			<MenuItem
33 | 					key={SortDir.NONE}
34 | 					name="Default"
35 | 					onClick={() => onValueClick(SortDir.NONE)}
36 | 					isSelected={value === SortDir.NONE}
37 | 				/>
38 | 		</Submenu>
39 | 	);
40 | }
41 | 


--------------------------------------------------------------------------------
/src/shared/frontmatter/utils.ts:
--------------------------------------------------------------------------------
 1 | import { CellType } from "src/shared/loom-state/types/loom-state";
 2 | import { ObsidianPropertyType } from "./types";
 3 | 
 4 | export const getAcceptedFrontmatterTypes = (
 5 | 	type: CellType
 6 | ): ObsidianPropertyType[] => {
 7 | 	switch (type) {
 8 | 		case CellType.TEXT:
 9 | 		case CellType.EMBED:
10 | 		case CellType.FILE:
11 | 		case CellType.TAG:
12 | 			return [ObsidianPropertyType.TEXT];
13 | 		case CellType.NUMBER:
14 | 			return [ObsidianPropertyType.NUMBER];
15 | 		case CellType.DATE:
16 | 			return [ObsidianPropertyType.DATE, ObsidianPropertyType.DATETIME];
17 | 		case CellType.CHECKBOX:
18 | 			return [ObsidianPropertyType.CHECKBOX];
19 | 		case CellType.MULTI_TAG:
20 | 			return [
21 | 				ObsidianPropertyType.ALIASES,
22 | 				ObsidianPropertyType.MULTITEXT,
23 | 				ObsidianPropertyType.TAGS,
24 | 			]; //CSSclasses may change from Multitext to its own type in the future
25 | 		case CellType.CREATION_TIME:
26 | 		case CellType.LAST_EDITED_TIME:
27 | 		case CellType.SOURCE:
28 | 		case CellType.SOURCE_FILE:
29 | 			return [];
30 | 		default:
31 | 			throw new Error(`Cell type ${type} not handled`);
32 | 	}
33 | };
34 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/filter-update-command.ts:
--------------------------------------------------------------------------------
 1 | import LoomStateCommand from "./loom-state-command";
 2 | import { Filter, LoomState } from "../types/loom-state";
 3 | 
 4 | export default class FilterUpdateCommand<
 5 | 	T extends Filter
 6 | > extends LoomStateCommand {
 7 | 	private id: string;
 8 | 	private data: Partial<T>;
 9 | 	private isPartial: boolean;
10 | 
11 | 	constructor(id: string, data: Partial<T>, isPartial = true) {
12 | 		super(false);
13 | 		this.id = id;
14 | 		this.data = data;
15 | 		this.isPartial = isPartial;
16 | 	}
17 | 
18 | 	execute(prevState: LoomState): LoomState {
19 | 		const { filters } = prevState.model;
20 | 		const nextFilters = filters.map((filter) => {
21 | 			if (filter.id === this.id) {
22 | 				let newFilter: T = this.data as T;
23 | 				if (this.isPartial)
24 | 					newFilter = { ...filter, ...this.data } as T;
25 | 				return newFilter;
26 | 			}
27 | 			return filter;
28 | 		});
29 | 
30 | 		const nextState = {
31 | 			...prevState,
32 | 			model: {
33 | 				...prevState.model,
34 | 				filters: nextFilters,
35 | 			},
36 | 		};
37 | 		this.finishExecute(prevState, nextState);
38 | 		return nextState;
39 | 	}
40 | }
41 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/source-update-command.ts:
--------------------------------------------------------------------------------
 1 | import LoomStateCommand from "./loom-state-command";
 2 | import { LoomState, Source } from "../types/loom-state";
 3 | 
 4 | export default class SourceUpdateCommand<
 5 | 	T extends Source
 6 | > extends LoomStateCommand {
 7 | 	private id: string;
 8 | 	private data: Partial<T>;
 9 | 	private isPartial: boolean;
10 | 
11 | 	constructor(id: string, data: Partial<T>, isPartial = true) {
12 | 		super(false);
13 | 		this.id = id;
14 | 		this.data = data;
15 | 		this.isPartial = isPartial;
16 | 	}
17 | 
18 | 	execute(prevState: LoomState): LoomState {
19 | 		const { sources } = prevState.model;
20 | 		const nextSources = sources.map((source) => {
21 | 			if (source.id === this.id) {
22 | 				let newSource: T = this.data as T;
23 | 				if (this.isPartial)
24 | 					newSource = { ...source, ...this.data } as T;
25 | 				return newSource;
26 | 			}
27 | 			return source;
28 | 		});
29 | 
30 | 		const nextState = {
31 | 			...prevState,
32 | 			model: {
33 | 				...prevState.model,
34 | 				sources: nextSources,
35 | 			},
36 | 		};
37 | 		this.finishExecute(prevState, nextState);
38 | 		return nextState;
39 | 	}
40 | }
41 | 


--------------------------------------------------------------------------------
/src/react/shared/wrap/index.tsx:
--------------------------------------------------------------------------------
 1 | import { AlignItems, JustifyContent } from "src/shared/render/types";
 2 | import { getDynamicSize } from "src/shared/render/utils";
 3 | import { getSpacing } from "src/shared/spacing";
 4 | import { DynamicSize, SpacingSize } from "src/shared/spacing/types";
 5 | 
 6 | import "./styles.css";
 7 | 
 8 | interface Props {
 9 | 	justify?: DynamicSize<JustifyContent> | JustifyContent;
10 | 	align?: AlignItems;
11 | 	width?: DynamicSize<string> | string;
12 | 	spacingX?: SpacingSize;
13 | 	spacingY?: SpacingSize;
14 | 	children: React.ReactNode;
15 | }
16 | 
17 | export default function Wrap({
18 | 	justify,
19 | 	align = "center",
20 | 	spacingX = "md",
21 | 	spacingY = "md",
22 | 	width,
23 | 	children,
24 | }: Props) {
25 | 	const justifyContent = getDynamicSize("flex-start", justify);
26 | 	const renderWidth = getDynamicSize("100%", width);
27 | 
28 | 	return (
29 | 		<div
30 | 			className="dataloom-wrap"
31 | 			style={{
32 | 				width: renderWidth,
33 | 				rowGap: getSpacing(spacingX),
34 | 				columnGap: getSpacing(spacingY),
35 | 				justifyContent,
36 | 				alignItems: align,
37 | 			}}
38 | 		>
39 | 			{children}
40 | 		</div>
41 | 	);
42 | }
43 | 


--------------------------------------------------------------------------------
/src/shared/frontmatter/obsidian-utils.ts:
--------------------------------------------------------------------------------
 1 | import { App } from "obsidian";
 2 | import { ObsidianPropertyType } from "./types";
 3 | 
 4 | /**
 5 |  * Updates the type of an existing Obsidian property
 6 |  *
 7 |  * NOTE: This is an undocumented API function and may break in future versions of Obsidian
 8 |  */
 9 | export const updateObsidianPropertyType = (
10 | 	app: App,
11 | 	name: string,
12 | 	type: ObsidianPropertyType
13 | ): Promise<void> => {
14 | 	return (app as any).metadataTypeManager.setType(name, type);
15 | };
16 | 
17 | /**
18 |  * Gets all Obsidian properties
19 |  *
20 |  * NOTE: This is an undocumented API function and may break in future versions of Obsidian
21 |  */
22 | export const getAllObsidianProperties = (app: App) => {
23 | 	return (app as any).metadataTypeManager.getAllProperties();
24 | };
25 | 
26 | /**
27 |  * Gets the type of an Obsidian property
28 |  *
29 |  * NOTE: This is an undocumented API function and may break in future versions of Obsidian
30 |  */
31 | export const getAssignedPropertyType = (
32 | 	app: App,
33 | 	name: string
34 | ): ObsidianPropertyType | null => {
35 | 	return (app as any).metadataTypeManager.getAssignedType(name);
36 | };
37 | 


--------------------------------------------------------------------------------
/src/react/shared/bubble/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import Stack from "../stack";
 4 | import Icon from "../icon";
 5 | import Button from "../button";
 6 | 
 7 | import "./styles.css";
 8 | 
 9 | interface Props {
10 | 	variant?: "default" | "no-fill";
11 | 	icon?: React.ReactNode;
12 | 	canRemove?: boolean;
13 | 	value: string;
14 | 	onRemoveClick?: () => void;
15 | }
16 | 
17 | export default function Bubble({
18 | 	variant = "default",
19 | 	canRemove,
20 | 	icon,
21 | 	value,
22 | 	onRemoveClick,
23 | }: Props) {
24 | 	let className = "dataloom-bubble";
25 | 	if (variant === "no-fill") {
26 | 		className += " dataloom-bubble--no-fill";
27 | 	}
28 | 
29 | 	return (
30 | 		<div className={className}>
31 | 			<Stack spacing="lg" isHorizontal>
32 | 				<Stack spacing="sm" isHorizontal>
33 | 					{icon}
34 | 					<span>{value}</span>
35 | 				</Stack>
36 | 				{canRemove && (
37 | 					<Button
38 | 						size="sm"
39 | 						invertFocusColor
40 | 						icon={
41 | 							<Icon lucideId="x" color="var(--text-on-accent)" />
42 | 						}
43 | 						ariaLabel="Remove sort"
44 | 						onClick={onRemoveClick}
45 | 					/>
46 | 				)}
47 | 			</Stack>
48 | 		</div>
49 | 	);
50 | }
51 | 


--------------------------------------------------------------------------------
/src/shared/date/date-validation.ts:
--------------------------------------------------------------------------------
 1 | import dayjs from "dayjs";
 2 | 
 3 | import {
 4 | 	DateFormat,
 5 | 	DateFormatSeparator,
 6 | } from "src/shared/loom-state/types/loom-state";
 7 | import { getDateFormatString } from "./utils";
 8 | import customParseFormat from "dayjs/plugin/customParseFormat";
 9 | 
10 | dayjs.extend(customParseFormat);
11 | 
12 | /**
13 |  * Trys to parse a string into a Date object
14 |  * @param value - The value to check
15 |  * @returns
16 |  */
17 | export const parseDateTime = (value: string) => {
18 | 	const date = new Date(value);
19 | 	if (date instanceof Date && !isNaN(date.getTime())) {
20 | 		return date.toISOString();
21 | 	}
22 | 	return null;
23 | };
24 | 
25 | export const isValidDateString = (
26 | 	value: string,
27 | 	format: DateFormat,
28 | 	separator: DateFormatSeparator
29 | ) => {
30 | 	const dateFormatString = getDateFormatString(format, separator);
31 | 	const dayjsDate = dayjs(value, dateFormatString, true);
32 | 	return dayjsDate.isValid();
33 | };
34 | 
35 | export const isValidTimeString = (value: string, hour12: boolean) => {
36 | 	const dayjsDate = dayjs(value, hour12 ? "h:mm A" : "HH:mm", true);
37 | 	return dayjsDate.isValid();
38 | };
39 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/type-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import MenuItem from "src/react/shared/menu-item";
 2 | import Submenu from "../../shared/submenu";
 3 | import { CellType } from "src/shared/loom-state/types/loom-state";
 4 | import { getDisplayNameForCellType } from "src/shared/loom-state/type-display-names";
 5 | import { getIconIdForCellType } from "src/react/shared/icon/utils";
 6 | interface Props {
 7 | 	title: string;
 8 | 	value: CellType;
 9 | 	onValueClick: (value: CellType) => void;
10 | 	onBackClick: () => void;
11 | }
12 | 
13 | export default function TypeSubmenu({
14 | 	title,
15 | 	value,
16 | 	onValueClick,
17 | 	onBackClick,
18 | }: Props) {
19 | 	return (
20 | 		<Submenu title={title} onBackClick={onBackClick}>
21 | 			{Object.values(CellType)
22 | 				.filter(
23 | 					(type) =>
24 | 						type !== CellType.SOURCE &&
25 | 						type !== CellType.SOURCE_FILE
26 | 				)
27 | 				.map((type: CellType) => (
28 | 					<MenuItem
29 | 						key={type}
30 | 						name={getDisplayNameForCellType(type)}
31 | 						lucideId={getIconIdForCellType(type)}
32 | 						onClick={() => onValueClick(type)}
33 | 						isSelected={type === value}
34 | 					/>
35 | 				))}
36 | 		</Submenu>
37 | 	);
38 | }
39 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/filter-menu/filter-column-select/index.tsx:
--------------------------------------------------------------------------------
 1 | import Select from "src/react/shared/select";
 2 | import { CellType, Column } from "src/shared/loom-state/types/loom-state";
 3 | 
 4 | interface Props {
 5 | 	id: string;
 6 | 	columns: Column[];
 7 | 	value: string;
 8 | 	onChange: (id: string, columnId: string) => void;
 9 | }
10 | 
11 | export default function FilterColumnSelect({
12 | 	id,
13 | 	columns,
14 | 	value,
15 | 	onChange,
16 | }: Props) {
17 | 	function handleKeyDown(e: React.KeyboardEvent) {
18 | 		if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
19 | 			//Stop propagation so the the menu doesn't close when pressing enter
20 | 			e.stopPropagation();
21 | 		}
22 | 	}
23 | 
24 | 	return (
25 | 		<Select
26 | 			className="dataloom-filter-column-select"
27 | 			value={value}
28 | 			onKeyDown={handleKeyDown}
29 | 			onChange={(newValue) => onChange(id, newValue)}
30 | 		>
31 | 			{columns
32 | 				.filter((column) => column.type !== CellType.SOURCE)
33 | 				.map((column) => {
34 | 					const { id, content } = column;
35 | 					return (
36 | 						<option key={id} value={id}>
37 | 							{content}
38 | 						</option>
39 | 					);
40 | 				})}
41 | 		</Select>
42 | 	);
43 | }
44 | 


--------------------------------------------------------------------------------
/src/react/import-app/match-columns/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-match-columns__container {
 2 |     width: 100%;
 3 |     max-height: 250px;
 4 |     overflow: scroll;
 5 |     padding-right: 3em;
 6 | }
 7 | 
 8 | .dataloom-match-columns table {
 9 |     border-collapse: separate;
10 |     border-spacing: 0;
11 | }
12 | 
13 | .dataloom-match-columns th, .dataloom-match-columns td {
14 |     border-bottom: 1px solid var(--table-border-color);
15 |     border-right: 1px solid var(--table-border-color);
16 |     padding: 0.5em;
17 |     max-width: 20em;
18 |     height: 1em;
19 | }
20 | 
21 | .dataloom-match-columns th {
22 |     position: sticky;
23 |     top: 0;
24 |     z-index: 1;
25 |     background-color: var(--background-secondary);
26 |     font-weight: 500;
27 | }
28 | 
29 | .dataloom-match-columns th {
30 |     min-width: 14em;
31 |     border-top: 1px solid var(--table-border-color);
32 | }
33 | 
34 | .dataloom-match-columns td:first-child,
35 | .dataloom-match-columns th:first-child {
36 |     border-left: 1px solid var(--table-border-color);
37 | }
38 | 
39 | .dataloom-match-columns--disabled {
40 |     opacity: 0.5;
41 | }
42 | 
43 | .dataloom-match-columns input[type="checkbox"] {
44 |     margin-top: 1px;
45 |     margin-right: 0px;
46 | }
47 | 


--------------------------------------------------------------------------------
/src/react/loom-app/file-cell-edit/index.tsx:
--------------------------------------------------------------------------------
 1 | import { TFile } from "obsidian";
 2 | 
 3 | import { SuggestList } from "src/react/shared/suggest-list";
 4 | import {
 5 | 	isMarkdownFile,
 6 | 	stripFileExtension,
 7 | } from "src/shared/link-and-path/file-path-utils";
 8 | 
 9 | interface Props {
10 | 	onChange: (value: string) => void;
11 | 	onClose: () => void;
12 | }
13 | 
14 | export default function FileCellEdit({ onChange, onClose }: Props) {
15 | 	function handleSuggestItemClick(file: TFile | null) {
16 | 		if (file) {
17 | 			let path = file.path;
18 | 			if (isMarkdownFile(path)) path = stripFileExtension(path);
19 | 			onChange(path);
20 | 		}
21 | 		onClose();
22 | 	}
23 | 
24 | 	function handleClearClick() {
25 | 		onChange("");
26 | 		onClose();
27 | 	}
28 | 
29 | 	function handleCreateClick(value: string) {
30 | 		if (isMarkdownFile(value)) value = stripFileExtension(value);
31 | 		onChange(value);
32 | 		onClose();
33 | 	}
34 | 
35 | 	return (
36 | 		<div className="dataloom-file-cell-edit">
37 | 			<SuggestList
38 | 				showInput
39 | 				showClear
40 | 				showCreate
41 | 				onItemClick={handleSuggestItemClick}
42 | 				onClearClick={handleClearClick}
43 | 				onCreateClick={handleCreateClick}
44 | 			/>
45 | 		</div>
46 | 	);
47 | }
48 | 


--------------------------------------------------------------------------------
/src/react/loom-app/date-cell-edit/date-format-menu.tsx:
--------------------------------------------------------------------------------
 1 | import Menu from "src/react/shared/menu";
 2 | import MenuItem from "src/react/shared/menu-item";
 3 | import { LoomMenuPosition } from "src/react/shared/menu/types";
 4 | 
 5 | import { getDisplayNameForDateFormat } from "src/shared/loom-state/type-display-names";
 6 | import { DateFormat } from "src/shared/loom-state/types/loom-state";
 7 | 
 8 | interface Props {
 9 | 	id: string;
10 | 	isOpen: boolean;
11 | 	position: LoomMenuPosition;
12 | 	value: DateFormat;
13 | 	onChange: (value: DateFormat) => void;
14 | }
15 | 
16 | export default function DateFormatMenu({
17 | 	id,
18 | 	position,
19 | 	isOpen,
20 | 	value,
21 | 	onChange,
22 | }: Props) {
23 | 	return (
24 | 		<Menu
25 | 			isOpen={isOpen}
26 | 			id={id}
27 | 			position={position}
28 | 			width={175}
29 | 			topOffset={10}
30 | 			leftOffset={75}
31 | 		>
32 | 			<div className="dataloom-date-format-menu">
33 | 				{Object.values(DateFormat).map((format) => (
34 | 					<MenuItem
35 | 						key={format}
36 | 						name={getDisplayNameForDateFormat(format)}
37 | 						isSelected={value === format}
38 | 						onClick={() => {
39 | 							onChange(format);
40 | 						}}
41 | 					/>
42 | 				))}
43 | 			</div>
44 | 		</Menu>
45 | 	);
46 | }
47 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sources-menu/folder-source-item/index.tsx:
--------------------------------------------------------------------------------
 1 | import Bubble from "src/react/shared/bubble";
 2 | import Button from "src/react/shared/button";
 3 | import Icon from "src/react/shared/icon";
 4 | import Stack from "src/react/shared/stack";
 5 | import SourceItem from "../source-item";
 6 | 
 7 | import { SourceType } from "src/shared/loom-state/types/loom-state";
 8 | import { getIconIdForSourceType } from "src/react/shared/icon/utils";
 9 | import Flex from "src/react/shared/flex";
10 | 
11 | interface Props {
12 | 	id: string;
13 | 	content: string;
14 | 	type: SourceType;
15 | 	onDelete: (id: string) => void;
16 | }
17 | 
18 | export default function FolderSourceItem({
19 | 	id,
20 | 	content,
21 | 	type,
22 | 	onDelete,
23 | }: Props) {
24 | 	return (
25 | 		<SourceItem>
26 | 			<Flex justify="space-between" align="center" height="100%">
27 | 				<Stack isHorizontal spacing="sm">
28 | 					<Bubble
29 | 						icon={<Icon lucideId={getIconIdForSourceType(type)} />}
30 | 						variant="no-fill"
31 | 						value={content}
32 | 					/>
33 | 				</Stack>
34 | 				<Button
35 | 					icon={<Icon lucideId="trash" />}
36 | 					ariaLabel="Delete source"
37 | 					onClick={() => onDelete(id)}
38 | 				/>
39 | 			</Flex>
40 | 		</SourceItem>
41 | 	);
42 | }
43 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-10.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState10 } from "../types/loom-state-10";
 3 | import {
 4 | 	LoomState11,
 5 | 	Column as Column11,
 6 | 	BodyCell as BodyCell11,
 7 | } from "../types/loom-state-11";
 8 | import { cloneDeep } from "lodash";
 9 | 
10 | /**
11 |  * Migrates to 6.19.0
12 |  */
13 | export default class MigrateState10 implements MigrateState {
14 | 	public migrate(prevState: LoomState10): LoomState11 {
15 | 		const { columns, bodyCells } = prevState.model;
16 | 
17 | 		//Migrate from functionType to calculationType
18 | 		const nextColumns: Column11[] = columns.map((column) => {
19 | 			const columnCopy: unknown = cloneDeep(column);
20 | 			const unknownCopy = columnCopy as Record<string, unknown>;
21 | 			unknownCopy.calculationType = unknownCopy.functionType;
22 | 			delete unknownCopy.functionType;
23 | 
24 | 			return columnCopy as Column11;
25 | 		});
26 | 
27 | 		const nextBodyCells: BodyCell11[] = bodyCells.map((cell) => {
28 | 			return {
29 | 				...cell,
30 | 				isExternalLink: true,
31 | 			};
32 | 		});
33 | 
34 | 		return {
35 | 			...prevState,
36 | 			model: {
37 | 				...prevState.model,
38 | 				columns: nextColumns,
39 | 				bodyCells: nextBodyCells,
40 | 			},
41 | 		};
42 | 	}
43 | }
44 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/types/index.ts:
--------------------------------------------------------------------------------
 1 | export type { LoomState } from "./loom-state";
 2 | export type { LoomState0 } from "./loom-state-0";
 3 | export type { LoomState1 } from "./loom-state-1";
 4 | export type { LoomState2 } from "./loom-state-2";
 5 | export type { LoomState3 } from "./loom-state-3";
 6 | export type { LoomState4 } from "./loom-state-4";
 7 | export type { LoomState5 } from "./loom-state-5";
 8 | export type { LoomState6 } from "./loom-state-6";
 9 | export type { LoomState7 } from "./loom-state-7";
10 | export type { LoomState8 } from "./loom-state-8";
11 | export type { LoomState9 } from "./loom-state-9";
12 | export type { LoomState10 } from "./loom-state-10";
13 | export type { LoomState11 } from "./loom-state-11";
14 | export type { LoomState12 } from "./loom-state-12";
15 | export type { LoomState13 } from "./loom-state-13";
16 | export type { LoomState14 } from "./loom-state-14";
17 | export type { LoomState15 } from "./loom-state-15";
18 | export type { LoomState16 } from "./loom-state-16";
19 | export type { LoomState17 } from "./loom-state-17";
20 | export type { LoomState18 } from "./loom-state-18";
21 | export type { LoomState19 } from "./loom-state-19";
22 | export type { LoomState20 } from "./loom-state-20";
23 | export type { LoomState21 } from "./loom-state-21";
24 | 


--------------------------------------------------------------------------------
/src/react/import-app/match-columns/bulk-options-menu.tsx:
--------------------------------------------------------------------------------
 1 | import ModalMenu from "src/react/shared/model-menu";
 2 | import { LoomMenuPosition } from "src/react/shared/menu/types";
 3 | 
 4 | import MenuItem from "src/react/shared/menu-item";
 5 | import { NEW_COLUMN_ID } from "../constants";
 6 | 
 7 | interface Props {
 8 | 	id: string;
 9 | 	isOpen: boolean;
10 | 	position: LoomMenuPosition;
11 | 	onAllColumnsEnabledToggle: (isEnabled: boolean) => void;
12 | 	onAllColumnsMatch: (columnId: string | null) => void;
13 | }
14 | 
15 | export default function BulkOptionsMenu({
16 | 	id,
17 | 	position,
18 | 	isOpen,
19 | 	onAllColumnsEnabledToggle,
20 | 	onAllColumnsMatch,
21 | }: Props) {
22 | 	return (
23 | 		<ModalMenu
24 | 			id={id}
25 | 			isOpen={isOpen}
26 | 			position={position}
27 | 			openDirection="bottom"
28 | 		>
29 | 			<MenuItem
30 | 				name="Match all as new"
31 | 				onClick={() => onAllColumnsMatch(NEW_COLUMN_ID)}
32 | 			/>
33 | 			<MenuItem
34 | 				name="Disable all"
35 | 				onClick={() => onAllColumnsEnabledToggle(false)}
36 | 			/>
37 | 			<MenuItem
38 | 				name="Enable all"
39 | 				onClick={() => onAllColumnsEnabledToggle(true)}
40 | 			/>
41 | 			<MenuItem
42 | 				name="Unmatch all"
43 | 				onClick={() => onAllColumnsMatch(null)}
44 | 			/>
45 | 		</ModalMenu>
46 | 	);
47 | }
48 | 


--------------------------------------------------------------------------------
/src/shared/keyboard-event.ts:
--------------------------------------------------------------------------------
 1 | import { Platform } from "obsidian";
 2 | 
 3 | /**
 4 |  * Checks if undo keys for Windows are being pressed
 5 |  * @param e the keyboard event
 6 |  */
 7 | export const isWindowsUndoDown = (e: React.KeyboardEvent) =>
 8 | 	e.ctrlKey && e.key === "z";
 9 | 
10 | /**
11 |  * Checks if redo keys for Windows are being pressed
12 |  * @param e the keyboard event
13 |  */
14 | export const isWindowsRedoDown = (e: React.KeyboardEvent) =>
15 | 	e.ctrlKey && e.key === "y";
16 | 
17 | /**
18 |  * Checks if undo keys for MacOS are being pressed
19 |  * @param e the keyboard event
20 |  */
21 | export const isMacUndoDown = (e: React.KeyboardEvent) =>
22 | 	e.metaKey && e.key === "z";
23 | 
24 | /**
25 |  * Checks if redo keys for MacOS are being pressed
26 |  * @param e the keyboard event
27 |  */
28 | export const isMacRedoDown = (e: React.KeyboardEvent) =>
29 | 	e.metaKey && e.shiftKey && e.key === "z";
30 | 
31 | export const isInsertLineDown = (e: React.KeyboardEvent) => {
32 | 	return e.shiftKey && e.key === "Enter";
33 | };
34 | 
35 | export const isInsertLineAltDown = (e: React.KeyboardEvent) => {
36 | 	if (Platform.isMacOS) {
37 | 		return e.metaKey && e.key === "Enter";
38 | 	} else if (Platform.isWin || Platform.isLinux) {
39 | 		return e.altKey && e.key === "Enter";
40 | 	}
41 | };
42 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-row-events.ts:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import RowAddCommand from "src/shared/loom-state/commands/row-add-command";
 3 | import RowDeleteCommand from "src/shared/loom-state/commands/row-delete-command";
 4 | import { isEventForThisApp } from "src/shared/event/utils";
 5 | import { useLoomState } from "src/react/loom-app/loom-state-provider";
 6 | import { useAppMount } from "../../app-mount-provider";
 7 | import EventManager from "src/shared/event/event-manager";
 8 | 
 9 | export const useRowEvents = () => {
10 | 	const { reactAppId, app } = useAppMount();
11 | 	const { doCommand } = useLoomState();
12 | 
13 | 	React.useEffect(() => {
14 | 		function handleRowAddEvent() {
15 | 			if (isEventForThisApp(reactAppId)) doCommand(new RowAddCommand());
16 | 		}
17 | 
18 | 		function handleRowDeleteEvent() {
19 | 			if (isEventForThisApp(reactAppId))
20 | 				doCommand(new RowDeleteCommand({ last: true }));
21 | 		}
22 | 
23 | 		EventManager.getInstance().on("add-row", handleRowAddEvent);
24 | 		EventManager.getInstance().on("delete-row", handleRowDeleteEvent);
25 | 
26 | 		return () => {
27 | 			EventManager.getInstance().off("add-row", handleRowAddEvent);
28 | 			EventManager.getInstance().off("delete-row", handleRowDeleteEvent);
29 | 		};
30 | 	}, [doCommand, app, reactAppId]);
31 | };
32 | 


--------------------------------------------------------------------------------
/src/react/loom-app/row-options/row-menu/index.tsx:
--------------------------------------------------------------------------------
 1 | import Menu from "src/react/shared/menu";
 2 | import MenuItem from "src/react/shared/menu-item";
 3 | import { LoomMenuPosition } from "src/react/shared/menu/types";
 4 | 
 5 | interface Props {
 6 | 	id: string;
 7 | 	isOpen: boolean;
 8 | 	position: LoomMenuPosition;
 9 | 	canDeleteRow: boolean;
10 | 	onDeleteClick: () => void;
11 | 	onInsertAboveClick: () => void;
12 | 	onInsertBelowClick: () => void;
13 | }
14 | export default function RowOptions({
15 | 	id,
16 | 	isOpen,
17 | 	position,
18 | 	canDeleteRow,
19 | 	onDeleteClick,
20 | 	onInsertAboveClick,
21 | 	onInsertBelowClick,
22 | }: Props) {
23 | 	return (
24 | 		<Menu
25 | 			id={id}
26 | 			isOpen={isOpen}
27 | 			openDirection="bottom-right"
28 | 			position={position}
29 | 		>
30 | 			<div className="dataloom-row-menu">
31 | 				{canDeleteRow && (
32 | 					<MenuItem
33 | 						lucideId="trash-2"
34 | 						name="Delete"
35 | 						onClick={() => onDeleteClick()}
36 | 					/>
37 | 				)}
38 | 				<MenuItem
39 | 					lucideId="chevrons-up"
40 | 					name="Insert above"
41 | 					onClick={() => onInsertAboveClick()}
42 | 				/>
43 | 				<MenuItem
44 | 					lucideId="chevrons-down"
45 | 					name="Insert below"
46 | 					onClick={() => onInsertBelowClick()}
47 | 				/>
48 | 			</div>
49 | 		</Menu>
50 | 	);
51 | }
52 | 


--------------------------------------------------------------------------------
/src/react/loom-app/embed-cell/embed/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useRenderMarkdown } from "src/shared/render-utils";
 2 | import { getSpacing } from "src/shared/spacing";
 3 | import {
 4 | 	AspectRatio,
 5 | 	PaddingSize,
 6 | } from "src/shared/loom-state/types/loom-state";
 7 | import { appendOrReplaceFirstChild } from "src/shared/render/utils";
 8 | 
 9 | interface Props {
10 | 	isExternalLink: boolean;
11 | 	content: string;
12 | 	aspectRatio: AspectRatio;
13 | 	horizontalPadding: PaddingSize;
14 | 	verticalPadding: PaddingSize;
15 | }
16 | 
17 | //TODO move out of separate file?
18 | export default function Embed({
19 | 	isExternalLink,
20 | 	content,
21 | 	aspectRatio,
22 | 	horizontalPadding,
23 | 	verticalPadding,
24 | }: Props) {
25 | 	const { containerRef, renderRef } = useRenderMarkdown(content, {
26 | 		isEmbed: true,
27 | 		isExternalLink,
28 | 	});
29 | 
30 | 	const paddingX = getSpacing(horizontalPadding);
31 | 	const paddingY = getSpacing(verticalPadding);
32 | 
33 | 	return (
34 | 		<div
35 | 			style={{
36 | 				aspectRatio,
37 | 				paddingLeft: paddingX,
38 | 				paddingRight: paddingX,
39 | 				paddingTop: paddingY,
40 | 				paddingBottom: paddingY,
41 | 			}}
42 | 			ref={(node) => {
43 | 				containerRef.current = node;
44 | 				appendOrReplaceFirstChild(node, renderRef.current);
45 | 			}}
46 | 		/>
47 | 	);
48 | }
49 | 


--------------------------------------------------------------------------------
/src/react/loom-app/date-cell-edit/date-format-separator-menu.tsx:
--------------------------------------------------------------------------------
 1 | import Menu from "src/react/shared/menu";
 2 | import MenuItem from "src/react/shared/menu-item";
 3 | import { LoomMenuPosition } from "src/react/shared/menu/types";
 4 | 
 5 | import { getDisplayNameForDateFormatSeparator } from "src/shared/loom-state/type-display-names";
 6 | import { DateFormatSeparator } from "src/shared/loom-state/types/loom-state";
 7 | 
 8 | interface Props {
 9 | 	id: string;
10 | 	isOpen: boolean;
11 | 	position: LoomMenuPosition;
12 | 	value: DateFormatSeparator;
13 | 	onChange: (value: DateFormatSeparator) => void;
14 | }
15 | 
16 | export default function DateFormatSeparatorMenu({
17 | 	id,
18 | 	position,
19 | 	isOpen,
20 | 	value,
21 | 	onChange,
22 | }: Props) {
23 | 	return (
24 | 		<Menu
25 | 			isOpen={isOpen}
26 | 			id={id}
27 | 			position={position}
28 | 			width={175}
29 | 			topOffset={10}
30 | 			leftOffset={75}
31 | 		>
32 | 			<div className="dataloom-date-format-separator-menu">
33 | 				{Object.values(DateFormatSeparator).map((format) => (
34 | 					<MenuItem
35 | 						key={format}
36 | 						name={getDisplayNameForDateFormatSeparator(format)}
37 | 						isSelected={value === format}
38 | 						onClick={() => {
39 | 							onChange(format);
40 | 						}}
41 | 					/>
42 | 				))}
43 | 			</div>
44 | 		</Menu>
45 | 	);
46 | }
47 | 


--------------------------------------------------------------------------------
/src/react/import-app/upload-data/index.tsx:
--------------------------------------------------------------------------------
 1 | import Text from "src/react/shared/text";
 2 | import FileInput from "./file-input";
 3 | import UploadTextarea from "./upload-textarea";
 4 | 
 5 | import { DataSource, DataType } from "../types";
 6 | 
 7 | interface Props {
 8 | 	source: DataSource;
 9 | 	dataType: DataType;
10 | 	fileName: string | null;
11 | 	hasHeadersRow: boolean;
12 | 	rawData: string;
13 | 	errorText: string | null;
14 | 	onRawDataChange: (rawData: string, fileName?: string) => void;
15 | 	onHeadersRowToggle: () => void;
16 | }
17 | 
18 | export default function UploadData({
19 | 	source,
20 | 	fileName,
21 | 	dataType,
22 | 	hasHeadersRow,
23 | 	rawData,
24 | 	errorText,
25 | 	onRawDataChange,
26 | 	onHeadersRowToggle,
27 | }: Props) {
28 | 	return (
29 | 		<div className="dataloom-upload-data">
30 | 			{source === DataSource.PASTE && (
31 | 				<UploadTextarea value={rawData} onChange={onRawDataChange} />
32 | 			)}
33 | 			{source === DataSource.FILE && (
34 | 				<FileInput
35 | 					fileName={fileName}
36 | 					dataType={dataType}
37 | 					hasHeadersRow={hasHeadersRow}
38 | 					onHeadersRowToggle={onHeadersRowToggle}
39 | 					onDataChange={onRawDataChange}
40 | 				/>
41 | 			)}
42 | 			{errorText !== null && (
43 | 				<Text variant="error" value={errorText} size="sm" />
44 | 			)}
45 | 		</div>
46 | 	);
47 | }
48 | 


--------------------------------------------------------------------------------
/src/react/loom-app/app/hooks/use-filter.ts:
--------------------------------------------------------------------------------
 1 | import { Filter } from "src/shared/loom-state/types/loom-state";
 2 | import { filterByFilters } from "../filter-by-filters";
 3 | import { useLoomState } from "../../loom-state-provider";
 4 | import FilterUpdateCommand from "src/shared/loom-state/commands/filter-update-command";
 5 | import FilterAddCommand from "src/shared/loom-state/commands/filter-add-command";
 6 | import FilterDeleteCommand from "src/shared/loom-state/commands/filter-delete-command";
 7 | import Logger from "js-logger";
 8 | 
 9 | export const useFilter = () => {
10 | 	const { doCommand } = useLoomState();
11 | 
12 | 	function handleFilterUpdate(
13 | 		id: string,
14 | 		data: Partial<Filter>,
15 | 		isPartial?: boolean
16 | 	) {
17 | 		Logger.trace("handleFilterUpdate", { id, data });
18 | 		doCommand(new FilterUpdateCommand<Filter>(id, data, isPartial));
19 | 	}
20 | 
21 | 	function handleFilterAdd() {
22 | 		Logger.trace("handleFilterAdd");
23 | 		doCommand(new FilterAddCommand());
24 | 	}
25 | 
26 | 	function handleFilterDelete(id: string) {
27 | 		Logger.trace("handleFilterDelete", { id });
28 | 		doCommand(new FilterDeleteCommand(id));
29 | 	}
30 | 
31 | 	return {
32 | 		onFilterAdd: handleFilterAdd,
33 | 		onFilterUpdate: handleFilterUpdate,
34 | 		onFilterDelete: handleFilterDelete,
35 | 		filterByFilters,
36 | 	};
37 | };
38 | 


--------------------------------------------------------------------------------
/src/react/loom-app/table/hooks.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export const useStickyOffset = (
 4 | 	ref: React.RefObject<HTMLDivElement>,
 5 | 	numFrozenColumns: number,
 6 | 	columnIndex: number
 7 | ) => {
 8 | 	const [columnWidths, setColumnWidths] = React.useState<number[]>([]);
 9 | 	React.useEffect(() => {
10 | 		if (!ref.current) return;
11 | 		if (columnIndex + 1 > numFrozenColumns) return;
12 | 
13 | 		const tableEl = ref.current.closest(".dataloom-table");
14 | 		if (!tableEl) return;
15 | 
16 | 		const columns = tableEl.querySelectorAll(".dataloom-cell--header");
17 | 		if (!columns) return;
18 | 
19 | 		const observers: ResizeObserver[] = [];
20 | 		columns.forEach((column, i) => {
21 | 			if (i < columnIndex) {
22 | 				const observer = new ResizeObserver(() => {
23 | 					const rect = column.getBoundingClientRect();
24 | 					setColumnWidths((prevState) => {
25 | 						const newState = [...prevState];
26 | 						newState[i] = rect.width;
27 | 						return newState;
28 | 					});
29 | 				});
30 | 				observer.observe(column);
31 | 				observers.push(observer);
32 | 			}
33 | 		});
34 | 
35 | 		return () => {
36 | 			observers.forEach((observer) => observer.disconnect());
37 | 		};
38 | 	}, [numFrozenColumns, columnIndex, ref]);
39 | 
40 | 	const offset = columnWidths.reduce((a, b) => a + b, 0);
41 | 	return offset;
42 | };
43 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/row-delete-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import RowDeleteCommand from "./row-delete-command";
 2 | import CommandArgumentsError from "./error/command-arguments-error";
 3 | import { createLoomState } from "../loom-state-factory";
 4 | 
 5 | describe("row-delete-command", () => {
 6 | 	it("should throw an error if no arguments are passed to the command object", () => {
 7 | 		try {
 8 | 			new RowDeleteCommand({});
 9 | 		} catch (err) {
10 | 			expect(err).toBeInstanceOf(CommandArgumentsError);
11 | 		}
12 | 	});
13 | 
14 | 	it("should delete a row when execute() is called", () => {
15 | 		//Arrange
16 | 		const prevState = createLoomState(1, 1);
17 | 		const command = new RowDeleteCommand({
18 | 			id: prevState.model.rows[0].id,
19 | 		});
20 | 
21 | 		//Act
22 | 		const executeState = command.execute(prevState);
23 | 
24 | 		//Assert
25 | 		expect(executeState.model.rows.length).toEqual(0);
26 | 	});
27 | 
28 | 	it("should delete the last row when execute() is called", () => {
29 | 		//Arrange
30 | 		const prevState = createLoomState(1, 2);
31 | 		const command = new RowDeleteCommand({
32 | 			last: true,
33 | 		});
34 | 
35 | 		//Act
36 | 		const executeState = command.execute(prevState);
37 | 
38 | 		//Assert
39 | 		expect(executeState.model.rows[0].id).toEqual(
40 | 			prevState.model.rows[0].id
41 | 		);
42 | 	});
43 | });
44 | 


--------------------------------------------------------------------------------
/src/shared/dragging/drag-context.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { DragData } from "./types";
 3 | 
 4 | type DropZone = {
 5 | 	id: string;
 6 | 	top: number;
 7 | 	bottom: number;
 8 | 	left: number;
 9 | 	right: number;
10 | };
11 | 
12 | interface ContextProps {
13 | 	dragData: DragData | null;
14 | 	touchDropZone: DropZone | null;
15 | 	setDragData: React.Dispatch<React.SetStateAction<DragData | null>>;
16 | 	setTouchDropZone: React.Dispatch<React.SetStateAction<DropZone | null>>;
17 | }
18 | 
19 | const DragContext = React.createContext<ContextProps | null>(null);
20 | 
21 | export const useDragContext = () => {
22 | 	const value = React.useContext(DragContext);
23 | 	if (value === null) {
24 | 		throw new Error(
25 | 			"useDragContext() called without a <DragProvider /> in the tree."
26 | 		);
27 | 	}
28 | 
29 | 	return value;
30 | };
31 | 
32 | interface Props {
33 | 	children: React.ReactNode;
34 | }
35 | 
36 | export default function DragProvider({ children }: Props) {
37 | 	const [dragData, setDragData] = React.useState<DragData | null>(null);
38 | 	const [touchDropZone, setTouchDropZone] = React.useState<DropZone | null>(
39 | 		null
40 | 	);
41 | 	return (
42 | 		<DragContext.Provider
43 | 			value={{ dragData, touchDropZone, setDragData, setTouchDropZone }}
44 | 		>
45 | 			{children}
46 | 		</DragContext.Provider>
47 | 	);
48 | }
49 | 


--------------------------------------------------------------------------------
/src/react/shared/model-menu/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { LoomMenuOpenDirection, LoomMenuPosition } from "../menu/types";
 4 | import { useShiftMenu } from "../base-menu/utils";
 5 | 
 6 | import { useModalMount } from "../modal-mount-provider";
 7 | import BaseMenu from "../base-menu";
 8 | 
 9 | interface Props {
10 | 	id: string;
11 | 	isOpen: boolean;
12 | 	hideBorder?: boolean;
13 | 	position: LoomMenuPosition;
14 | 	openDirection?: LoomMenuOpenDirection;
15 | 	width?: number;
16 | 	height?: number;
17 | 	maxWidth?: number;
18 | 	maxHeight?: number;
19 | 	children: React.ReactNode;
20 | }
21 | 
22 | export default function ModalMenu({
23 | 	id,
24 | 	isOpen,
25 | 	hideBorder = false,
26 | 	openDirection,
27 | 	position,
28 | 	width = 0,
29 | 	height = 0,
30 | 	maxHeight = 0,
31 | 	maxWidth = 0,
32 | 	children,
33 | }: Props) {
34 | 	const ref = React.useRef<HTMLDivElement>(null);
35 | 	const { modalEl } = useModalMount();
36 | 
37 | 	useShiftMenu(true, modalEl, ref, position, isOpen, {
38 | 		openDirection,
39 | 	});
40 | 
41 | 	return (
42 | 		<BaseMenu
43 | 			ref={ref}
44 | 			id={id}
45 | 			isOpen={isOpen}
46 | 			hideBorder={hideBorder}
47 | 			position={position}
48 | 			width={width}
49 | 			height={height}
50 | 			maxHeight={maxHeight}
51 | 			maxWidth={maxWidth}
52 | 		>
53 | 			{children}
54 | 		</BaseMenu>
55 | 	);
56 | }
57 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/cell-body-update-command.spec.ts:
--------------------------------------------------------------------------------
 1 | import CellBodyUpdateCommand from "./cell-body-update-command";
 2 | import { advanceBy, clear } from "jest-date-mock";
 3 | import { createLoomState } from "../loom-state-factory";
 4 | import { TextCell } from "../types/loom-state";
 5 | 
 6 | describe("cell-update-command", () => {
 7 | 	it("should update a cell property when execute() is called", async () => {
 8 | 		//Arrange
 9 | 		const prevState = createLoomState(1, 1);
10 | 		const command = new CellBodyUpdateCommand(
11 | 			prevState.model.rows[0].cells[0].id,
12 | 			{
13 | 				content: "test",
14 | 			}
15 | 		);
16 | 
17 | 		//Act
18 | 		advanceBy(100);
19 | 		const executeState = command.execute(prevState);
20 | 		clear();
21 | 
22 | 		//Assert
23 | 		expect(executeState.model.rows.length).toEqual(1);
24 | 		expect(executeState.model.rows[0].cells.length).toEqual(1);
25 | 		expect(
26 | 			(executeState.model.rows[0].cells[0] as TextCell).content
27 | 		).toEqual("test");
28 | 
29 | 		const executeLastEditedDateTime = new Date(
30 | 			executeState.model.rows[0].lastEditedDateTime
31 | 		).getTime();
32 | 		const prevLastEditedDateTime = new Date(
33 | 			prevState.model.rows[0].lastEditedDateTime
34 | 		).getTime();
35 | 
36 | 		expect(executeLastEditedDateTime).toBeGreaterThan(
37 | 			prevLastEditedDateTime
38 | 		);
39 | 	});
40 | });
41 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/column-delete-command/utils.ts:
--------------------------------------------------------------------------------
 1 | import ColumnNotFoundError from "src/shared/error/column-not-found-error";
 2 | import { Column, Filter, Row } from "../../types/loom-state";
 3 | import CellNotFoundError from "src/shared/error/cell-not-found-error";
 4 | 
 5 | export const columnDeleteExecute = (
 6 | 	prevColumns: Column[],
 7 | 	prevRows: Row[],
 8 | 	prevFilters: Filter[],
 9 | 	id: string
10 | ) => {
11 | 	//Maintains at least 1 column in the table
12 | 	if (prevColumns.length === 1) {
13 | 		return null;
14 | 	}
15 | 
16 | 	const columnToDelete = prevColumns.find((column) => column.id === id);
17 | 	if (!columnToDelete) throw new ColumnNotFoundError({ id });
18 | 
19 | 	const nextColumns = prevColumns.filter((column) => column.id !== id);
20 | 
21 | 	const nextRows: Row[] = prevRows.map((row) => {
22 | 		const { cells } = row;
23 | 		const cell = row.cells.find((cell) => cell.columnId === id);
24 | 		if (!cell)
25 | 			throw new CellNotFoundError({
26 | 				columnId: id,
27 | 				rowId: row.id,
28 | 			});
29 | 
30 | 		const nextCells = cells.filter((cell) => cell.columnId !== id);
31 | 		return {
32 | 			...row,
33 | 			cells: nextCells,
34 | 		};
35 | 	});
36 | 
37 | 	const nextFilters = prevFilters.filter((filter) => filter.columnId !== id);
38 | 
39 | 	return {
40 | 		nextColumns,
41 | 		nextRows,
42 | 		nextFilters,
43 | 	};
44 | };
45 | 


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/more-menu/toggle-column-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import Padding from "src/react/shared/padding";
 2 | import Stack from "src/react/shared/stack";
 3 | import Submenu from "src/react/shared/submenu";
 4 | import Switch from "src/react/shared/switch";
 5 | import Text from "src/react/shared/text";
 6 | import Wrap from "src/react/shared/wrap";
 7 | import { Column } from "src/shared/loom-state/types/loom-state";
 8 | 
 9 | interface Props {
10 | 	columns: Column[];
11 | 	onColumnToggle: (id: string, isVisible: boolean) => void;
12 | 	onBackClick: () => void;
13 | }
14 | 
15 | export default function ToggleColumnSubmenu({
16 | 	columns,
17 | 	onColumnToggle,
18 | 	onBackClick,
19 | }: Props) {
20 | 	return (
21 | 		<Submenu title="Toggle" onBackClick={onBackClick}>
22 | 			<Padding py="sm">
23 | 				<Stack spacing="md">
24 | 					{columns.map((column) => {
25 | 						const { id, content, isVisible } = column;
26 | 						return (
27 | 							<Wrap
28 | 								key={id}
29 | 								justify="space-between"
30 | 								spacingX="4xl"
31 | 							>
32 | 								<Text value={content} maxWidth="250px" />
33 | 								<Switch
34 | 									value={isVisible}
35 | 									onToggle={() =>
36 | 										onColumnToggle(id, !isVisible)
37 | 									}
38 | 								/>
39 | 							</Wrap>
40 | 						);
41 | 					})}
42 | 				</Stack>
43 | 			</Padding>
44 | 		</Submenu>
45 | 	);
46 | }
47 | 


--------------------------------------------------------------------------------
/src/shared/hooks.ts:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { generateUuid } from "./uuid";
 3 | 
 4 | export const useForceUpdate = (): [number, () => void] => {
 5 | 	const [time, setTime] = React.useState(0);
 6 | 	return [time, React.useCallback(() => setTime(Date.now()), [])];
 7 | };
 8 | 
 9 | export const useCompare = <T>(value: T, runOnMount = true) => {
10 | 	const prevValue = usePrevious(value);
11 | 	//On mount the value will be undefined, so we don't want to return true
12 | 	if (prevValue === undefined) return runOnMount;
13 | 	return prevValue !== value;
14 | };
15 | 
16 | export const usePrevious = <T>(value: T) => {
17 | 	const ref = React.useRef<T>();
18 | 	React.useEffect(() => {
19 | 		ref.current = value;
20 | 	});
21 | 	return ref.current;
22 | };
23 | 
24 | export const usePlaceCursorAtEnd = (
25 | 	inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
26 | 	value: string
27 | ) => {
28 | 	React.useEffect(() => {
29 | 		function setSelection() {
30 | 			if (inputRef.current) {
31 | 				inputRef.current.selectionStart = value.length;
32 | 				inputRef.current.selectionEnd = value.length;
33 | 			}
34 | 		}
35 | 
36 | 		setSelection();
37 | 		// eslint-disable-next-line react-hooks/exhaustive-deps
38 | 	}, [inputRef]);
39 | };
40 | 
41 | export const useUUID = (): string => {
42 | 	const [uuid] = React.useState(generateUuid());
43 | 	return uuid;
44 | };
45 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-7.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import { LoomState7 } from "../types/loom-state-7";
 3 | import {
 4 | 	LoomState8,
 5 | 	Column as Column8,
 6 | 	FooterCell as FooterCell8,
 7 | } from "../types/loom-state-8";
 8 | import { cloneDeep } from "lodash";
 9 | 
10 | /**
11 |  * Migrates to 6.12.3
12 |  */
13 | export default class MigrateState7 implements MigrateState {
14 | 	public migrate(prevState: LoomState7): LoomState8 {
15 | 		const { columns, footerCells } = prevState.model;
16 | 
17 | 		const nextColumns: Column8[] = columns.map((column) => {
18 | 			const footerCell = footerCells.find(
19 | 				(cell) => cell.columnId === column.id
20 | 			);
21 | 			if (!footerCell) throw new Error("Footer cell not found");
22 | 			return {
23 | 				...column,
24 | 				functionType: footerCell.functionType,
25 | 			};
26 | 		});
27 | 
28 | 		const nextFooterCells: FooterCell8[] = footerCells.map((cell) => {
29 | 			const cellCopy: unknown = cloneDeep(cell);
30 | 			const unknownCell = cellCopy as Record<string, unknown>;
31 | 			if (unknownCell["functionType"]) {
32 | 				delete unknownCell.functionType;
33 | 			}
34 | 			return cell;
35 | 		});
36 | 
37 | 		return {
38 | 			...prevState,
39 | 			model: {
40 | 				...prevState.model,
41 | 				columns: nextColumns,
42 | 				footerCells: nextFooterCells,
43 | 			},
44 | 		};
45 | 	}
46 | }
47 | 


--------------------------------------------------------------------------------
/src/react/shared/input/styles.css:
--------------------------------------------------------------------------------
 1 | .dataloom-input {
 2 |     width: 100%;
 3 |     height: 100% !important; /* Override Obsidian mobile style */
 4 |     transition: none !important;
 5 |     font-size: var(--text-normal) !important; /* Reset to default Obsidian style */
 6 |     box-shadow: none !important;
 7 | }
 8 | 
 9 | .dataloom-input--transparent {
10 |     background-color: transparent !important;
11 |     border: 0 !important;
12 |     border-radius: 0 !important;
13 |     padding: var(--dataloom-spacing--sm) var(--dataloom-spacing--lg) !important;
14 | }
15 | 
16 | .dataloom-input--border {
17 |     border: 1px solid var(--table-border-color) !important;
18 |     background-color: var(--background-secondary) !important;
19 | }
20 | 
21 | .dataloom-input--numeric {
22 |     /* border: 0 !important;
23 |     border-radius: 0 !important; */
24 |     text-align: right;
25 | }
26 | 
27 | .dataloom-input--error {
28 |     outline: 2px solid var(--background-modifier-error) !important;
29 |     outline-offset: -2px;
30 | }
31 | 
32 | .dataloom-input--error:focus {
33 |     outline: 2px solid var(--background-modifier-error) !important;
34 | }
35 | 
36 | .dataloom-input__focus-outline--default {
37 |     outline: 2px solid var(--background-modifier-border-focus) !important;
38 |     outline-offset: -2px;
39 | }
40 | 
41 | .dataloom-input__focus-outline--none {
42 |     outline: none !important;
43 | }


--------------------------------------------------------------------------------
/src/react/loom-app/option-bar/sources-menu/add-source-submenu/folder-source-options.tsx:
--------------------------------------------------------------------------------
 1 | import Input from "src/react/shared/input";
 2 | import Stack from "src/react/shared/stack";
 3 | import Switch from "src/react/shared/switch";
 4 | 
 5 | import { AddSourceError } from "./types";
 6 | 
 7 | interface Props {
 8 | 	pathInputId: string;
 9 | 	includeSubfoldersInputId: string;
10 | 	includeSubfolders: boolean;
11 | 	path: string;
12 | 	error: AddSourceError | null;
13 | 	onIncludeSubfoldersToggle: (value: boolean) => void;
14 | 	onPathChange: (value: string) => void;
15 | }
16 | 
17 | export default function FolderSourceOptions({
18 | 	pathInputId,
19 | 	includeSubfoldersInputId,
20 | 	error,
21 | 	includeSubfolders,
22 | 	path,
23 | 	onIncludeSubfoldersToggle,
24 | 	onPathChange,
25 | }: Props) {
26 | 	return (
27 | 		<>
28 | 			<Stack spacing="sm">
29 | 				<label htmlFor={pathInputId}>Path</label>
30 | 				<Input
31 | 					id={pathInputId}
32 | 					autoFocus={false}
33 | 					hasError={error?.inputId === pathInputId}
34 | 					value={path}
35 | 					onChange={(value) => onPathChange(value)}
36 | 				/>
37 | 			</Stack>
38 | 			<Stack spacing="sm">
39 | 				<label htmlFor={includeSubfoldersInputId}>
40 | 					Include subfolders
41 | 				</label>
42 | 				<Switch
43 | 					value={includeSubfolders}
44 | 					onToggle={onIncludeSubfoldersToggle}
45 | 				/>
46 | 			</Stack>
47 | 		</>
48 | 	);
49 | }
50 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/migrate/migrate-state-4.ts:
--------------------------------------------------------------------------------
 1 | import MigrateState from "./migrate-state";
 2 | import ColumnNotFoundError from "src/shared/error/column-not-found-error";
 3 | import { LoomState4, CellType as CellType4 } from "../types/loom-state-4";
 4 | import { LoomState5, BodyCell as BodyCell5 } from "../types/loom-state-5";
 5 | import { CHECKBOX_MARKDOWN_UNCHECKED } from "src/shared/markdown/constants";
 6 | 
 7 | /**
 8 |  * Migrates to 6.8.0
 9 |  */
10 | export default class MigrateState4 implements MigrateState {
11 | 	public migrate(prevState: LoomState4): LoomState5 {
12 | 		const { columns, bodyCells } = prevState.model;
13 | 
14 | 		//Fix: set all checkbox cells to unchecked
15 | 		const nextBodyCells: BodyCell5[] = bodyCells.map((cell) => {
16 | 			const column = columns.find(
17 | 				(column) => column.id === cell.columnId
18 | 			);
19 | 			if (!column) throw new ColumnNotFoundError({ id: cell.columnId });
20 | 
21 | 			let markdown = cell.markdown;
22 | 
23 | 			if (column.type === CellType4.CHECKBOX) {
24 | 				if (markdown === "") {
25 | 					markdown = CHECKBOX_MARKDOWN_UNCHECKED;
26 | 				}
27 | 			}
28 | 
29 | 			return {
30 | 				...cell,
31 | 				markdown,
32 | 			};
33 | 		});
34 | 
35 | 		return {
36 | 			model: {
37 | 				...prevState.model,
38 | 				bodyCells: nextBodyCells,
39 | 				filterRules: [],
40 | 			},
41 | 			pluginVersion: prevState.pluginVersion,
42 | 		};
43 | 	}
44 | }
45 | 


--------------------------------------------------------------------------------
/src/shared/cell-content/number-cell-content.ts:
--------------------------------------------------------------------------------
 1 | import { addThousandsSeparator } from "src/react/loom-app/number-cell/utils";
 2 | import { NumberFormat, CurrencyType } from "../loom-state/types/loom-state";
 3 | 
 4 | export const getNumberCellContent = (
 5 | 	format: NumberFormat,
 6 | 	value: number | null,
 7 | 	options?: {
 8 | 		currency?: CurrencyType;
 9 | 		prefix?: string;
10 | 		suffix?: string;
11 | 		separator?: string;
12 | 	}
13 | ): string => {
14 | 	const { currency, separator, suffix, prefix } = options ?? {};
15 | 
16 | 	if (value === null) {
17 | 		return "";
18 | 	}
19 | 
20 | 	let formattedValue = value.toString();
21 | 
22 | 	if (format === NumberFormat.CURRENCY) {
23 | 		if (!currency) {
24 | 			throw new Error(
25 | 				"a currency is required when number format is set to currency"
26 | 			);
27 | 		}
28 | 		return toCurrencyString(value, currency);
29 | 	}
30 | 	if (separator && formattedValue.length > 0)
31 | 		formattedValue = addThousandsSeparator(formattedValue, separator);
32 | 	if (prefix && formattedValue.length > 0)
33 | 		formattedValue = `${prefix} ${value}`;
34 | 	if (suffix && formattedValue.length > 0)
35 | 		formattedValue = `${value} ${suffix}`;
36 | 	return formattedValue;
37 | };
38 | 
39 | const toCurrencyString = (value: number, type: CurrencyType) => {
40 | 	return new Intl.NumberFormat("en-US", {
41 | 		style: "currency",
42 | 		currency: type,
43 | 	}).format(value);
44 | };
45 | 


--------------------------------------------------------------------------------
/src/obsidian/modal/export-modal.tsx:
--------------------------------------------------------------------------------
 1 | import { App, Modal, TFile } from "obsidian";
 2 | import { Root, createRoot } from "react-dom/client";
 3 | import { ExportApp } from "src/react/export-app";
 4 | import { Provider } from "react-redux";
 5 | import { store } from "src/redux/store";
 6 | import { renderDivider, setModalTitle } from "../shared";
 7 | import { LoomState } from "src/shared/loom-state/types/loom-state";
 8 | 
 9 | export default class ExportModal extends Modal {
10 | 	root: Root;
11 | 	loomFile: TFile;
12 | 	loomState: LoomState;
13 | 
14 | 	constructor(app: App, loomFile: TFile, loomState: LoomState) {
15 | 		super(app);
16 | 		this.app = app;
17 | 		this.loomFile = loomFile;
18 | 		this.loomState = loomState;
19 | 	}
20 | 
21 | 	onOpen() {
22 | 		const { containerEl } = this;
23 | 		setModalTitle(containerEl, "DataLoom Export");
24 | 
25 | 		const { contentEl } = this;
26 | 		renderDivider(contentEl);
27 | 		const appContainerEl = contentEl.createDiv();
28 | 		this.renderApp(appContainerEl);
29 | 	}
30 | 
31 | 	private async renderApp(contentEl: HTMLElement) {
32 | 		this.root = createRoot(contentEl);
33 | 		this.root.render(
34 | 			<Provider store={store}>
35 | 				<ExportApp
36 | 					app={this.app}
37 | 					loomState={this.loomState}
38 | 					loomFilePath={this.loomFile.path}
39 | 				/>
40 | 			</Provider>
41 | 		);
42 | 	}
43 | 
44 | 	onClose() {
45 | 		if (this.root) this.root.unmount();
46 | 	}
47 | }
48 | 


--------------------------------------------------------------------------------
/src/shared/match/index.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	GeneralCalculation,
 3 | 	NumberCalculation,
 4 | } from "src/shared/loom-state/types/loom-state";
 5 | import {
 6 | 	NUMBER_REGEX,
 7 | 	DATE_REGEX,
 8 | 	CHECKBOX_REGEX,
 9 | 	NUMBER_INPUT_REGEX,
10 | 	TWITTER_LINK_REGEX,
11 | 	YOUTUBE_LINK_REGEX,
12 | 	IMAGE_EXTENSION_REGEX,
13 | } from "./regex";
14 | 
15 | export const isNumber = (value: string): boolean => {
16 | 	return value.match(NUMBER_REGEX) !== null;
17 | };
18 | 
19 | export const isNumberInput = (value: string): boolean => {
20 | 	return value.match(NUMBER_INPUT_REGEX) !== null;
21 | };
22 | 
23 | export const isDate = (value: string): boolean => {
24 | 	return value.match(DATE_REGEX) !== null;
25 | };
26 | 
27 | export const isCheckbox = (value: string): boolean => {
28 | 	return value.match(CHECKBOX_REGEX) !== null;
29 | };
30 | 
31 | export const isImage = (value: string): boolean => {
32 | 	return value.match(IMAGE_EXTENSION_REGEX) !== null;
33 | };
34 | 
35 | export const isYouTubeLink = (value: string): boolean => {
36 | 	return value.match(YOUTUBE_LINK_REGEX) !== null;
37 | };
38 | 
39 | export const isTwitterLink = (value: string): boolean => {
40 | 	return value.match(TWITTER_LINK_REGEX) !== null;
41 | };
42 | 
43 | export const isNumberCalcuation = (
44 | 	value: GeneralCalculation | NumberCalculation
45 | ): value is NumberCalculation => {
46 | 	return Object.values(NumberCalculation).includes(
47 | 		value as NumberCalculation
48 | 	);
49 | };
50 | 


--------------------------------------------------------------------------------
/src/react/loom-app/header-menu/frontmatter-key-submenu.tsx:
--------------------------------------------------------------------------------
 1 | import Submenu from "../../shared/submenu";
 2 | import Stack from "src/react/shared/stack";
 3 | import Padding from "src/react/shared/padding";
 4 | import MenuItem from "src/react/shared/menu-item";
 5 | import Divider from "src/react/shared/divider";
 6 | 
 7 | interface Props {
 8 | 	title: string;
 9 | 	selectedKey: string | null;
10 | 	frontmatterKeys: {
11 | 		value: string;
12 | 		isSelectable: boolean;
13 | 	}[];
14 | 	onBackClick: () => void;
15 | 	onFrontmatterKeyChange: (key: string | null) => void;
16 | }
17 | 
18 | export default function FrontmatterKeySubmenu({
19 | 	title,
20 | 	selectedKey,
21 | 	frontmatterKeys,
22 | 	onBackClick,
23 | 	onFrontmatterKeyChange,
24 | }: Props) {
25 | 	return (
26 | 		<Submenu title={title} onBackClick={onBackClick}>
27 | 			<Padding pt="md">
28 | 				<Stack spacing="sm">
29 | 					{frontmatterKeys.map((key) => {
30 | 						const { value, isSelectable } = key;
31 | 						const isSelected = selectedKey === value;
32 | 
33 | 						return (
34 | 							<MenuItem
35 | 								key={value}
36 | 								isDisabled={!isSelectable}
37 | 								isSelected={isSelected}
38 | 								name={value}
39 | 								onClick={() => onFrontmatterKeyChange(value)}
40 | 							/>
41 | 						);
42 | 					})}
43 | 					<Divider />
44 | 					<MenuItem
45 | 						name="Clear"
46 | 						onClick={() => onFrontmatterKeyChange(null)}
47 | 					/>
48 | 				</Stack>
49 | 			</Padding>
50 | 		</Submenu>
51 | 	);
52 | }
53 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/column-delete-command/index.ts:
--------------------------------------------------------------------------------
 1 | import { LoomState } from "../../types/loom-state";
 2 | import LoomStateCommand from "../loom-state-command";
 3 | import CommandArgumentsError from "../error/command-arguments-error";
 4 | import { columnDeleteExecute } from "./utils";
 5 | 
 6 | export default class ColumnDeleteCommand extends LoomStateCommand {
 7 | 	private columnId?: string;
 8 | 	private last?: boolean;
 9 | 
10 | 	constructor(options: { id?: string; last?: boolean }) {
11 | 		super(false);
12 | 		const { id, last } = options;
13 | 		if (id === undefined && last === undefined)
14 | 			throw new CommandArgumentsError("delete");
15 | 
16 | 		this.columnId = id;
17 | 		this.last = last;
18 | 	}
19 | 
20 | 	execute(prevState: LoomState): LoomState {
21 | 		const { columns, rows, filters } = prevState.model;
22 | 
23 | 		let id = this.columnId;
24 | 		if (this.last) id = columns[columns.length - 1].id;
25 | 
26 | 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
27 | 		const result = columnDeleteExecute(columns, rows, filters, id!);
28 | 		if (result === null) {
29 | 			return prevState;
30 | 		}
31 | 
32 | 		const { nextColumns, nextFilters, nextRows } = result;
33 | 
34 | 		const nextState = {
35 | 			...prevState,
36 | 			model: {
37 | 				...prevState.model,
38 | 				columns: nextColumns,
39 | 				rows: nextRows,
40 | 				filters: nextFilters,
41 | 			},
42 | 		};
43 | 		this.finishExecute(prevState, nextState);
44 | 		return nextState;
45 | 	}
46 | }
47 | 


--------------------------------------------------------------------------------
/src/shared/loom-state/commands/tag-update-command.ts:
--------------------------------------------------------------------------------
 1 | import LoomStateCommand from "./loom-state-command";
 2 | import { Column, LoomState, Tag } from "../types/loom-state";
 3 | 
 4 | export default class TagUpdateCommand extends LoomStateCommand {
 5 | 	private columnId: string;
 6 | 	private tagId: string;
 7 | 	private data: Partial<Tag>;
 8 | 	private isPartial: boolean;
 9 | 
10 | 	constructor(
11 | 		columnId: string,
12 | 		tagId: string,
13 | 		data: Partial<Tag>,
14 | 		isPartial = true
15 | 	) {
16 | 		super(false);
17 | 		this.columnId = columnId;
18 | 		this.tagId = tagId;
19 | 		this.data = data;
20 | 		this.isPartial = isPartial;
21 | 	}
22 | 
23 | 	execute(prevState: LoomState): LoomState {
24 | 		const { columns } = prevState.model;
25 | 		const nextColumns: Column[] = columns.map((column) => {
26 | 			if (column.id === this.columnId) {
27 | 				const { tags } = column;
28 | 				const nextTags: Tag[] = tags.map((tag) => {
29 | 					if (tag.id === this.tagId) {
30 | 						let newTag: Tag = this.data as Tag;
31 | 						if (this.isPartial)
32 | 							newTag = { ...tag, ...this.data } as Tag;
33 | 						return newTag;
34 | 					}
35 | 					return tag;
36 | 				});
37 | 				return { ...column, tags: nextTags };
38 | 			}
39 | 			return column;
40 | 		});
41 | 
42 | 		const nextState = {
43 | 			...prevState,
44 | 			model: {
45 | 				...prevState.model,
46 | 				columns: nextColumns,
47 | 			},
48 | 		};
49 | 		this.finishExecute(prevState, nextState);
50 | 		return nextState;
51 | 	}
52 | }
53 | 


--------------------------------------------------------------------------------
/src/react/shared/menu-button/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import MenuTrigger from "../menu-trigger";
 4 | import Button from "../button";
 5 | 
 6 | import { ButtonVariant } from "../button/types";
 7 | import { LoomMenuLevel } from "../menu-provider/types";
 8 | 
 9 | interface Props {
10 | 	menuId: string;
11 | 	level: LoomMenuLevel;
12 | 	isFocused: boolean;
13 | 	isDisabled?: boolean;
14 | 	variant?: ButtonVariant;
15 | 	ariaLabel?: string;
16 | 	icon?: React.ReactNode;
17 | 	children?: React.ReactNode;
18 | 	onClick?: (e: React.MouseEvent) => void;
19 | 	onMouseDown?: (e: React.MouseEvent) => void;
20 | 	onOpen: () => void;
21 | }
22 | 
23 | const MenuButton = React.forwardRef<HTMLDivElement, Props>(
24 | 	(
25 | 		{
26 | 			menuId,
27 | 			isDisabled,
28 | 			isFocused,
29 | 			variant,
30 | 			level,
31 | 			ariaLabel,
32 | 			icon,
33 | 			children,
34 | 			onClick,
35 | 			onMouseDown,
36 | 			onOpen,
37 | 		}: Props,
38 | 		ref
39 | 	) => {
40 | 		return (
41 | 			<MenuTrigger
42 | 				ref={ref}
43 | 				menuId={menuId}
44 | 				isFocused={isFocused}
45 | 				variant="button"
46 | 				level={level}
47 | 				onClick={onClick}
48 | 				onMouseDown={onMouseDown}
49 | 				onOpen={onOpen}
50 | 			>
51 | 				<Button
52 | 					isDisabled={isDisabled}
53 | 					isFocusable={false}
54 | 					variant={variant}
55 | 					icon={icon}
56 | 					ariaLabel={ariaLabel}
57 | 				>
58 | 					{children}
59 | 				</Button>
60 | 			</MenuTrigger>
61 | 		);
62 | 	}
63 | );
64 | 
65 | export default MenuButton;
66 | 


--------------------------------------------------------------------------------