Skip to content

Commit efb6b2c

Browse files
bdlukaabdlukaa
committed
feat: Example app
1 parent 7fb994f commit efb6b2c

11 files changed

Lines changed: 370 additions & 0 deletions

File tree

‎example/.gitignore‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Files and directories created by pub.
2+
**/doc/api/
3+
.dart_tool/
4+
.packages
5+
6+
# Conventional directory for build output.
7+
/build/
8+
9+
# Miscellaneous
10+
*.class
11+
*.log
12+
*.pyc
13+
*.swp
14+
.DS_Store
15+
.atom/
16+
.buildlog/
17+
.history
18+
.svn/
19+
migrate_working_dir/
20+
21+
# IntelliJ related
22+
*.iml
23+
*.ipr
24+
*.iws
25+
.idea/
26+
27+
# The .vscode folder contains launch configuration and tasks you configure in
28+
# VS Code which you may wish to be included in version control, so this line
29+
# is commented out by default.
30+
#.vscode/

‎example/analysis_options.yaml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# This file configures the static analysis results for your project (errors,
2+
# warnings, and lints).
3+
#
4+
# This enables the 'recommended' set of lints from `package:lints`.
5+
# This set helps identify many issues that may lead to problems when running
6+
# or consuming Dart code, and enforces writing Dart using a single, idiomatic
7+
# style and format.
8+
#
9+
# If you want a smaller set of lints you can change this to specify
10+
# 'package:lints/core.yaml'. These are just the most critical lints
11+
# (the recommended set includes the core lints).
12+
# The core lints are also what is used by pub.dev for scoring packages.
13+
14+
include: package:lints/recommended.yaml
15+
16+
analyzer:
17+
# exclude:
18+
# - path/to/excluded/files/**
19+
20+
# Jaspr has a custom analyzer plugin 'jaspr_lints', which is enabled here.
21+
#
22+
# You can toggle Jaspr specific lint rules in the 'diagnostics' section below.
23+
plugins:
24+
jaspr_lints:
25+
version: ^0.6.0
26+
diagnostics:
27+
prefer_html_components: true
28+
sort_children_last: true
29+
styles_ordering: true
30+
31+
# Uncomment the following section to enable or disable additional rules.
32+
33+
# linter:
34+
# rules:
35+
# camel_case_types: true
36+
37+
# For more information about the core and recommended set of lints, see
38+
# https://dart.dev/go/core-lints
39+
40+
formatter:
41+
# Change this to your preferred line length.
42+
page_width: 120
43+
trailing_commas: preserve
44+
45+
# For additional information about configuring this file, see
46+
# https://dart.dev/guides/language/analysis-options

‎example/lib/app.dart‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import 'package:jaspr/dom.dart';
2+
import 'package:jaspr/jaspr.dart';
3+
4+
import 'pages/home.dart';
5+
6+
class App extends StatelessComponent {
7+
const App({super.key});
8+
9+
@override
10+
Component build(BuildContext context) {
11+
return div(
12+
styles: Styles(
13+
display: Display.flex,
14+
margin: Spacing.symmetric(horizontal: Unit.pixels(75)),
15+
flexDirection: FlexDirection.column,
16+
fontFamily: FontFamily.variable('Ink Free Regular'),
17+
),
18+
classes: 'main',
19+
[
20+
h2(
21+
styles: Styles(
22+
width: Unit.percent(100),
23+
margin: Spacing.symmetric(vertical: .pixels(20)),
24+
flex: Flex.shrink(1),
25+
textAlign: TextAlign.center,
26+
),
27+
[.text('Dart Romanize')],
28+
),
29+
div(
30+
styles: Styles(flex: Flex.grow(1)),
31+
[
32+
const Home(),
33+
],
34+
),
35+
],
36+
);
37+
}
38+
}

‎example/lib/main.client.dart‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
library;
2+
3+
import 'package:jaspr/client.dart';
4+
5+
import 'app.dart';
6+
7+
void main() {
8+
runApp(App());
9+
}

‎example/lib/pages/home.dart‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import 'package:jaspr/dom.dart';
2+
import 'package:jaspr/jaspr.dart';
3+
import 'package:romanize/romanize.dart';
4+
5+
class Home extends StatefulComponent {
6+
const Home({super.key});
7+
8+
@override
9+
State<Home> createState() => _HomeState();
10+
}
11+
12+
class _HomeState extends State<Home> {
13+
String _text = '안녕하세요, 만나서 반갑습니다.';
14+
15+
String get _romanized => TextRomanizer.romanize(_text);
16+
17+
@override
18+
Component build(BuildContext context) {
19+
return div(
20+
styles: Styles(
21+
display: Display.flex,
22+
padding: Spacing.all(Unit.pixels(20)),
23+
flexDirection: FlexDirection.row,
24+
alignItems: AlignItems.start,
25+
gap: Gap(row: Unit.pixels(60), column: Unit.pixels(60)),
26+
),
27+
[
28+
div(styles: Styles(flex: Flex.basis(Unit.percent(50))), [
29+
h3([.text('Input')]),
30+
textarea(
31+
placeholder: 'Type your text here...',
32+
onInput: (text) => setState(() => _text = text),
33+
rows: 15,
34+
required: true,
35+
spellCheck: SpellCheck.isFalse,
36+
styles: Styles(
37+
width: Unit.percent(100),
38+
height: Unit.percent(100),
39+
flex: Flex.grow(1),
40+
raw: {'resize': 'none'},
41+
),
42+
[.text(_text)],
43+
),
44+
]),
45+
div(styles: Styles(flex: Flex.basis(Unit.percent(50))), [
46+
h3(styles: Styles(textAlign: TextAlign.left), [.text('Output')]),
47+
textarea(
48+
placeholder: 'Type your text here...',
49+
onInput: (text) => setState(() => _text = text),
50+
rows: 15,
51+
readonly: true,
52+
required: true,
53+
spellCheck: SpellCheck.isFalse,
54+
styles: Styles(
55+
width: Unit.percent(100),
56+
height: Unit.percent(100),
57+
flex: Flex.grow(1),
58+
raw: {'resize': 'none'},
59+
),
60+
[.text(_romanized)],
61+
),
62+
// p(styles: Styles(whiteSpace: WhiteSpace.preWrap), [.text(_romanized)]),
63+
]),
64+
],
65+
);
66+
}
67+
}

‎example/pubspec.yaml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: example
2+
description: Romanize package example.
3+
version: 0.0.1
4+
5+
publish_to: none
6+
7+
environment:
8+
sdk: ^3.10.0
9+
10+
dependencies:
11+
jaspr: ^0.22.0
12+
romanize:
13+
path: ../
14+
15+
dev_dependencies:
16+
build_runner: ^2.10.0
17+
build_web_compilers: ^4.4.6
18+
jaspr_builder: ^0.22.0
19+
lints: ^5.0.0
20+
21+
jaspr:
22+
mode: client

‎example/web/favicon.ico‎

1.52 KB
Binary file not shown.

‎example/web/images/logo.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎example/web/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="scaffolded-by" content="https://github.com/schultek/jaspr">
7+
8+
<title>Romanize for Dart</title>
9+
<link rel="stylesheet" href="styles.css">
10+
11+
12+
<!--
13+
Loads and runs the compiled 'main.client.dart' file,
14+
can be changed to any other '.client.dart' file inside /lib.
15+
-->
16+
<script defer src="main.client.dart.js"></script>
17+
</head>
18+
<body>
19+
<!-- Your app component will be inserted here. -->
20+
</body>
21+
</html>

‎example/web/styles.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@import url(https://fonts.googleapis.com/css?family=Roboto);
2+
3+
html, body {
4+
font-family: 'Roboto', sans-serif;
5+
width: 100%;
6+
min-height: 100vh;
7+
padding: 0;
8+
margin: 0;
9+
10+
--primary-color: #01589B;
11+
}
12+
13+
h1 {
14+
font-size: 4rem;
15+
margin: unset;
16+
}
17+
18+
.main {
19+
height: 100vh;
20+
display: flex;
21+
flex-direction: column;
22+
flex-wrap: wrap;
23+
}
24+
25+
.main section {
26+
flex: 1;
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: center;
30+
align-items: center;
31+
}
32+
33+
header {
34+
display: flex;
35+
justify-content: center;
36+
padding: 1em;
37+
}
38+
39+
header nav {
40+
background-color: var(--primary-color);
41+
height: 3em;
42+
border-radius: 10px;
43+
overflow: clip;
44+
display: flex;
45+
justify-content: space-between;
46+
}
47+
48+
header nav a {
49+
color: white;
50+
font-weight: 700;
51+
text-decoration: none;
52+
padding-left: 2em;
53+
padding-right: 2em;
54+
height: 100%;
55+
display: flex;
56+
align-items: center;
57+
}
58+
59+
header nav a:hover {
60+
background-color: #0005;
61+
}
62+
63+
header nav div.active {
64+
position: relative;
65+
}
66+
67+
header nav div.active::before {
68+
content: "";
69+
display: block;
70+
height: 2px;
71+
border-radius: 1px;
72+
position: absolute;
73+
left: 20px;
74+
bottom: 0.5em;
75+
right: 20px;
76+
background-color: white;
77+
}
78+
79+
.counter {
80+
display: flex;
81+
align-items: center;
82+
padding-top: 10px;
83+
padding-bottom: 10px;
84+
border-top-style: solid;
85+
border-bottom-style: solid;
86+
border-top-color: var(--primary-color);
87+
border-bottom-color: var(--primary-color);
88+
border-top-width: 1px;
89+
border-bottom-width: 1px;
90+
}
91+
92+
.counter button {
93+
font-size: 2rem;
94+
width: 2em;
95+
height: 2em;
96+
border: unset;
97+
cursor: pointer;
98+
border-radius: 2em;
99+
display: flex;
100+
justify-content: center;
101+
align-items: center;
102+
background-color: transparent;
103+
}
104+
105+
.counter button:hover {
106+
background-color: #0001;
107+
}
108+
109+
.counter span {
110+
padding-left: 2rem;
111+
padding-right: 2rem;
112+
box-sizing: border-box;
113+
min-width: 2.5em;
114+
color: var(--primary-color);
115+
font-size: 4rem;
116+
text-align: center;
117+
}
118+
119+
ol {
120+
max-width: 500px;
121+
}

0 commit comments

Comments
 (0)