Skip to content

Commit a95fcff

Browse files
rjhyderjhyde
committed
initial commit
0 parents  commit a95fcff

File tree

21 files changed

+98635
-0
lines changed

21 files changed

+98635
-0
lines changed

‎.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
FLATFILE_API_KEY=your_api_key_here
2+
FLATFILE_ENVIRONMENT_ID=your_environment_id_here

‎.flatfile/develop.js‎

Lines changed: 69942 additions & 0 deletions
Large diffs are not rendered by default.

‎.gitignore‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Dependency directories
2+
node_modules/
3+
dist/
4+
5+
# Environment variables
6+
.env
7+
8+
# Logs
9+
logs
10+
*.log
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?
23+
24+
# OS generated files
25+
.DS_Store
26+
.DS_Store?
27+
._*
28+
.Spotlight-V100
29+
.Trashes
30+
ehthumbs.db
31+
Thumbs.db

‎README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Headerless File Import Demo
2+
3+
This repo demonstrates how to import delimited files without headers in Flatfile.
4+
5+
## Features
6+
- Import any pipe-delimited (.txt or .csv) file
7+
- Automatically assign headers based on predefined mapping
8+
- Process AMS-formatted data
9+
10+
## How It Works
11+
1. Upload any pipe-delimited file
12+
2. The system checks to see if the file has headers or not
13+
3. If not, the system will use the predefined headers
14+
4. The system automatically assigns headers based on column position
15+
5. Data is mapped to the appropriate fields in the sheet
16+
6. Process or transform the data as needed
17+
18+
## Setup
19+
20+
1. Clone this repository
21+
2. Install dependencies:
22+
```
23+
npm install
24+
```
25+
3. Create a `.env` file with your Flatfile credentials:
26+
```
27+
FLATFILE_API_KEY=your_api_key
28+
FLATFILE_ENVIRONMENT_ID=your_environment_id
29+
```
30+
4. Start the development server:
31+
```
32+
npm run dev
33+
```
34+
35+
## Implementation Details
36+
37+
The key components of this demo are:
38+
39+
1. **Delimiter Extractor**: Configured to work with any .txt or .csv file
40+
2. **Explicit Headers**: Predefined headers are assigned to columns based on position
41+
3. **AMS Sheet**: Sheet configured to handle AMS data format
42+
43+
The main logic for header assignment is in `app/extractors/delimiter/index.ts` and the header definitions are in `app/config/headers.ts`.
44+
45+
## Sample Files
46+
47+
You can test with any pipe-delimited file. The system will automatically assign headers based on the predefined mapping.
48+
49+
There's a "AMS" file in the `sample-data` folder that can be used for the AMS sheet. This file is a pipe-delimited .txt file with no headers.
50+
51+
## Customization
52+
53+
To adapt this for your own use case:
54+
1. Modify the headers in `app/config/headers.ts`
55+
2. Update the sheet definition in `app/blueprints/sheets/ams.ts`
56+
3. Adjust the delimiter in `app/extractors/delimiter/index.ts` if needed

‎app/blueprints/customer.workbook.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { Flatfile } from "@flatfile/api";
2+
import { amsSheet } from "./sheets/ams";
3+
4+
// Simple workbook with AMS sheet
5+
export const customerWorkbook: Flatfile.CreateWorkbookConfig = {
6+
name: "AMS Data Import",
7+
labels: ["ams-data-import"],
8+
sheets: [amsSheet],
9+
};
10+
11+
export default customerWorkbook;

‎app/blueprints/documents/welcome.ts‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
export default {
2+
title: "Welcome",
3+
slug: "welcome",
4+
body: `
5+
<div class="my-doc">
6+
<style>
7+
.my-doc {
8+
display: flex;
9+
height: calc(100% - 24px);
10+
overflow: hidden;
11+
flex-direction: row;
12+
margin: 24px 24px 0 24px;
13+
color: #484D6A;
14+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
15+
}
16+
.my-doc h1 {
17+
padding: 0px;
18+
margin: 0px;
19+
color: #484D6A;
20+
font-size: 32px;
21+
margin-bottom: 12px;
22+
}
23+
.my-doc h2 {
24+
padding: 0px;
25+
margin: 0px;
26+
color: #484D6A;
27+
}
28+
.my-doc p {
29+
padding: 0px;
30+
margin: 0px;
31+
line-height: 1.5;
32+
}
33+
.left {
34+
border-right: 1px solid rgba(72,77,106,0.2);
35+
margin-right: 48px;
36+
padding-right: 48px;
37+
width: 70%;
38+
display: flex;
39+
flex-direction: column;
40+
}
41+
.right {
42+
padding-top: 102px;
43+
width: 280px;
44+
flex-shrink: 0;
45+
}
46+
.right > div {
47+
margin-bottom: 32px;
48+
}
49+
.boxes {
50+
display: flex;
51+
flex-direction: column;
52+
gap: 16px;
53+
flex-grow: 1;
54+
overflow-y: auto;
55+
padding-right: 20px;
56+
}
57+
.box {
58+
border: 1px solid rgba(72,77,106,0.1);
59+
padding: 8px;
60+
margin-bottom: 16px;
61+
border-radius: 12px;
62+
box-shadow: 0px 4px 20px rgba(72,77,106,0.08);
63+
padding: 24px;
64+
transition: all 0.2s ease-in-out;
65+
}
66+
.box h2 {
67+
font-size: 18px;
68+
font-weight: 600;
69+
margin-bottom: 8px;
70+
}
71+
.box p {
72+
font-size: 14px;
73+
color: rgba(72,77,106,0.8);
74+
}
75+
.divider {
76+
height: 1px;
77+
background: rgba(71, 84, 103, 0.1);
78+
margin: 12px 0;
79+
border: none;
80+
}
81+
.tip-box {
82+
display: flex;
83+
flex-direction: row;
84+
align-items: flex-start;
85+
gap: 12px;
86+
background-color: rgba(0, 0, 0, 0.03);
87+
padding: 24px;
88+
border-radius: 12px;
89+
max-width: 320px;
90+
margin-top: 32px;
91+
}
92+
.tip-box svg {
93+
width: 24px;
94+
flex-shrink: 0;
95+
color: rgba(0, 0, 0, 0.8);
96+
}
97+
.tip-box svg path {
98+
stroke: rgba(0, 0, 0, 0.8);
99+
}
100+
.tip-box p {
101+
margin: 0;
102+
font-size: 14px;
103+
color: rgba(0, 0, 0, 0.8);
104+
}
105+
.tip-box a {
106+
color: inherit;
107+
text-decoration: underline;
108+
}
109+
</style>
110+
111+
<div class="left">
112+
<div style="margin-bottom: 36px;">
113+
<h1>Welcome to Headerless File Import Demo</h1>
114+
<p style="font-weight: 500; font-size: 16px;">This demo shows how to import files without headers in Flatfile.</p>
115+
</div>
116+
117+
<div>
118+
<p style="font-weight: 600;">Follow the steps below to get started:</p>
119+
<hr class="divider">
120+
</div>
121+
122+
<div class="boxes">
123+
<div class="box">
124+
<h2>1. Navigate to the AMS Data Import workbook</h2>
125+
<p>Click on the "AMS Data Import" workbook in the sidebar to open it.</p>
126+
</div>
127+
128+
<div class="box">
129+
<h2>2. Upload your pipe-delimited file</h2>
130+
<p>Upload any pipe-delimited (.txt or .csv) file. The system will automatically:</p>
131+
<ul style="margin-top: 8px; color: rgba(72,77,106,0.8);">
132+
<li>Detect the pipe delimiter</li>
133+
<li>Assign predefined headers to each column</li>
134+
<li>Map the data to the appropriate fields</li>
135+
</ul>
136+
</div>
137+
138+
<div class="box">
139+
<h2>3. Review and edit your data</h2>
140+
<p>After the file is imported, you can review and edit the data as needed.</p>
141+
</div>
142+
143+
<div class="box">
144+
<h2>4. Export or process your data</h2>
145+
<p>Once you're satisfied with the data, you can export it or process it further.</p>
146+
</div>
147+
</div>
148+
</div>
149+
150+
<div class="right">
151+
<div>
152+
<p style="font-weight: 600;">Key features:</p>
153+
<hr class="divider">
154+
</div>
155+
156+
<div class="tip-box">
157+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
158+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
159+
</svg>
160+
<p>This demo works with any pipe-delimited file, regardless of filename.</p>
161+
</div>
162+
163+
<div class="tip-box" style="margin-top: 16px;">
164+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
165+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
166+
</svg>
167+
<p>Headers are automatically assigned based on column position.</p>
168+
</div>
169+
</div>
170+
</div>
171+
`,
172+
};

0 commit comments

Comments
 (0)