Skip to content

Commit 5e84bef

Browse files
raymond-lamraymond-lam
committed
Use Next.js in example
1 parent aecc34f commit 5e84bef

31 files changed

+9133
-33017
lines changed

‎.eslintignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
jest.config.js
22
dist/
3-
example/build/
3+
example/
44
node_modules/
55
.snapshots/
66
*.min.js

‎.github/workflows/ci.yml

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,19 @@ jobs:
2020
node-version: 20
2121
- run: npm ci
2222
- run: npm run-s test:lint
23+
lint-example:
24+
name: Lint Example App
25+
runs-on: ubuntu-latest
26+
steps:
27+
- uses: actions/checkout@v3
28+
- uses: actions/setup-node@v3
29+
with:
30+
node-version: 20
31+
- run: npm ci
32+
- working-directory: ./example
33+
run: npm ci
34+
- working-directory: ./example
35+
run: npm run lint
2336
prettier:
2437
name: Prettier
2538
runs-on: ubuntu-latest
@@ -30,6 +43,19 @@ jobs:
3043
node-version: 20
3144
- run: npm ci
3245
- run: npm run-s test:prettier
46+
prettier-example:
47+
name: Prettier Example App
48+
runs-on: ubuntu-latest
49+
steps:
50+
- uses: actions/checkout@v3
51+
- uses: actions/setup-node@v3
52+
with:
53+
node-version: 20
54+
- run: npm ci
55+
- working-directory: ./example
56+
run: npm ci
57+
- working-directory: ./example
58+
run: npm run prettier:check
3359
typescript:
3460
name: Typescript
3561
runs-on: ubuntu-latest
@@ -78,20 +104,26 @@ jobs:
78104
run: npm install
79105
- working-directory: ./example
80106
run: npm run build
81-
- if: matrix.os == 'ubuntu-latest' && matrix.node_version == 16 && ((github.event_name == 'push' && github.ref == 'refs/heads/main') || github.event.action == 'published')
107+
- if: matrix.os == 'ubuntu-latest' && matrix.node_version == 20 && ((github.event_name == 'push' && github.ref == 'refs/heads/main') || github.event.action == 'published')
108+
working-directory: ./example
109+
run: npm run export
110+
- if: matrix.os == 'ubuntu-latest' && matrix.node_version == 20 && ((github.event_name == 'push' && github.ref == 'refs/heads/main') || github.event.action == 'published')
82111
uses: actions/upload-artifact@v3
83112
with:
84113
name: dist
85114
path: dist/**
86-
- if: matrix.os == 'ubuntu-latest' && matrix.node_version == 16 && github.event_name == 'push' && github.ref == 'refs/heads/main'
115+
- if: matrix.os == 'ubuntu-latest' && matrix.node_version == 20 && github.event_name == 'push' && github.ref == 'refs/heads/main'
87116
uses: actions/upload-artifact@v3
88117
with:
89118
name: example-app
90-
path: example/build/**
119+
path: example/out/**
91120
deploy:
92121
needs:
93122
- lint
123+
- lint-example
94124
- prettier
125+
- prettier-example
126+
- typescript
95127
- test
96128
- build
97129
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
@@ -112,17 +144,20 @@ jobs:
112144
- uses: actions/download-artifact@v3
113145
with:
114146
name: example-app
115-
path: example/build
147+
path: example/out
116148
- uses: peaceiris/actions-gh-pages@v3
117149
with:
118150
personal_token: ${{ secrets.GH_PAGES_DEPLOY_TOKEN }}
119-
publish_dir: ./example/build
151+
publish_dir: ./example/out
120152
user_name: 'github-actions[bot]'
121153
user_email: 'github-actions[bot]@users.noreply.github.com'
122154
publish:
123155
needs:
124156
- lint
157+
- lint-example
125158
- prettier
159+
- prettier-example
160+
- typescript
126161
- test
127162
- build
128163
if: github.event.action == 'published'

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ coverage
99

1010
# builds
1111
dist
12-
example/build
12+
example/out
13+
.next
14+
tsconfig.tsbuildinfo
1315

1416
.DS_Store
1517
*.swp

‎.prettierrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
"bracketSpacing": true,
77
"jsxBracketSameLine": false,
88
"arrowParens": "always",
9+
"endOfLine": "auto",
910
"trailingComma": "all"
1011
}

‎example/.eslintrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["plugin:@next/next/recommended"]
3+
}

‎example/README.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1+
This example app runs from [Next.js](https://nextjs.org/).
22

3-
It is linked to the react-json-schema-form-builder package in the parent directory for development purposes.
3+
To set up and run the example app:
44

5-
You can run `npm install` and then `npm start` to test your package.
5+
1. From the root of the repo, run `npm install` to install dependencies.
6+
1. Then, run `npm run build` or `npm run watch` to build the React JSON Schema Form Builder.
7+
1. Navigate to the example app by running `cd example`.
8+
1. Run `npm install` to install the example app's dependencies.
9+
1. Run `npm run dev` to start up the development server.
10+
1. Navigate your browser to `http://localhost:3000/react-json-schema-form-builder`.

‎example/src/ErrorBoundary.tsx renamed to ‎example/components/ErrorBoundary.tsx

File renamed without changes.

‎example/src/JsonSchemaFormSuite.tsx renamed to ‎example/components/JsonSchemaFormSuite.tsx

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -157,30 +157,6 @@ class JsonSchemaFormEditor extends React.Component<Props, State> {
157157
</Alert>
158158
<Tabs
159159
tabs={[
160-
{
161-
name: 'Visual Form Builder',
162-
id: 'form-builder',
163-
content: (
164-
<div
165-
className='tab-pane'
166-
style={{
167-
height: this.props.height ? this.props.height : '500px',
168-
}}
169-
>
170-
<ErrorBoundary onErr={() => {}}>
171-
<FormBuilder
172-
schema={this.props.schema}
173-
uischema={this.props.uischema}
174-
mods={this.props.mods}
175-
onChange={(newSchema, newUiSchema) => {
176-
if (this.props.onChange)
177-
this.props.onChange(newSchema, newUiSchema);
178-
}}
179-
/>
180-
</ErrorBoundary>
181-
</div>
182-
),
183-
},
184160
{
185161
name: 'Preview Form',
186162
id: 'preview-form',
@@ -257,6 +233,54 @@ class JsonSchemaFormEditor extends React.Component<Props, State> {
257233
</div>
258234
),
259235
},
236+
{
237+
name: 'Visual Form Builder',
238+
id: 'form-builder',
239+
content: (
240+
<div
241+
className='tab-pane'
242+
style={{
243+
height: this.props.height ? this.props.height : '500px',
244+
}}
245+
>
246+
<ErrorBoundary onErr={() => {}}>
247+
<FormBuilder
248+
schema={this.props.schema}
249+
uischema={this.props.uischema}
250+
mods={this.props.mods}
251+
onChange={(newSchema, newUiSchema) => {
252+
if (this.props.onChange)
253+
this.props.onChange(newSchema, newUiSchema);
254+
}}
255+
/>
256+
</ErrorBoundary>
257+
</div>
258+
),
259+
},
260+
{
261+
name: 'Pre-Configured Components',
262+
id: 'pre-configured',
263+
content: (
264+
<div
265+
className='tab-pane'
266+
style={{
267+
height: this.props.height ? this.props.height : '500px',
268+
}}
269+
>
270+
<ErrorBoundary onErr={() => {}}>
271+
<PredefinedGallery
272+
schema={this.props.schema}
273+
uischema={this.props.uischema}
274+
mods={this.props.mods}
275+
onChange={(newSchema, newUiSchema) => {
276+
if (this.props.onChange)
277+
this.props.onChange(newSchema, newUiSchema);
278+
}}
279+
/>
280+
</ErrorBoundary>
281+
</div>
282+
),
283+
},
260284
{
261285
name: 'Edit Schema',
262286
id: 'editors',
@@ -334,30 +358,6 @@ class JsonSchemaFormEditor extends React.Component<Props, State> {
334358
</div>
335359
),
336360
},
337-
{
338-
name: 'Pre-Configured Components',
339-
id: 'pre-configured',
340-
content: (
341-
<div
342-
className='tab-pane'
343-
style={{
344-
height: this.props.height ? this.props.height : '500px',
345-
}}
346-
>
347-
<ErrorBoundary onErr={() => {}}>
348-
<PredefinedGallery
349-
schema={this.props.schema}
350-
uischema={this.props.uischema}
351-
mods={this.props.mods}
352-
onChange={(newSchema, newUiSchema) => {
353-
if (this.props.onChange)
354-
this.props.onChange(newSchema, newUiSchema);
355-
}}
356-
/>
357-
</ErrorBoundary>
358-
</div>
359-
),
360-
},
361361
]}
362362
/>
363363
</div>

‎example/src/PlaygroundContainer.tsx renamed to ‎example/components/PlaygroundContainer.tsx

File renamed without changes.

‎example/src/modules.d.ts renamed to ‎example/components/modules.d.ts

File renamed without changes.

0 commit comments

Comments
 (0)