Skip to content

Commit d768f7c

Browse files
stasmstasm
authored
Replace old @fluent/react examples with a single new one (#468)
* Remove old examples * Add a single example * Fetch localization files asynchronously * Rewrite Hello.ts to use hooks * Update deps * Rewrite the example into TypeScript * Add a README * Document using npm pack * Keep current date in App's state
1 parent eecdc1a commit d768f7c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+275
-1257
lines changed

‎fluent-react/.npmignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.nyc_output
22
coverage
33
esm/.compiled
4-
examples
4+
example
55
src
66
test
77
makefile

‎fluent-react/examples/change-language/.gitignore‎ renamed to ‎fluent-react/example/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
.cache
22
dist
3+
*.tgz

‎fluent-react/example/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# @fluent/react Example
2+
3+
This tiny React app demonstrates how `@fluent/react` can integrate with React.
4+
5+
## Running
6+
7+
The example app requires a local build of `@fluent/react`. In the root of
8+
your `fluent.js` clone install the build tools:
9+
10+
cd fluent.js/
11+
npm install
12+
13+
Then build and package `@fluent/react`:
14+
15+
cd fluent.js/fluent-react/
16+
npm install
17+
make
18+
npm pack
19+
mv fluent-react-*.tgz example/fluent-react.tgz
20+
21+
Finally, change back to this directory, and build the example:
22+
23+
cd fluent.js/fluent-react/example/
24+
npm install
25+
npm start
26+
27+
Open http://localhost:1234 to see the example running.

‎fluent-react/example/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "fluent-react-example",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"start": "parcel serve public/index.html",
7+
"build": "parcel build public/index.html"
8+
},
9+
"dependencies": {
10+
"@fluent/bundle": "0.15.x",
11+
"@fluent/langneg": "0.4.x",
12+
"@fluent/react": "file:fluent-react.tgz",
13+
"react": "16.8.x",
14+
"react-dom": "16.8.x"
15+
},
16+
"devDependencies": {
17+
"@types/react": "^16.9.32",
18+
"@types/react-dom": "^16.9.6",
19+
"parcel-bundler": "1.12.x"
20+
},
21+
"engines": {
22+
"node": ">=10.0.0",
23+
"browsers": "Firefox >= 57"
24+
}
25+
}

‎fluent-react/example/public/en-US.ftl‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
hello = Hello, { $userName }!
2+
hello-no-name = Hello, stranger!
3+
type-name =
4+
.placeholder = Your name
5+
6+
# $date (Date) - Current date, formatted as month and day.
7+
today-date = Today is {$date}.
8+
# $date (Date) - Current date, formatted as weekday.
9+
today-weekday = It's {$date}.
10+
11+
sign-in-or-cancel = <signin>Sign in</signin> or <cancel>cancel</cancel>.
12+
clicked-sign-in = You are now signed in.
13+
clicked-cancel = OK, nevermind.

‎fluent-react/examples/redux-sync/public/index.html‎ renamed to ‎fluent-react/example/public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Redux sync - a fluent-react example</title>
6+
<title>@fluent/react Example</title>
77
</head>
88
<body>
99
<div id="root"></div>
10-
<script src="../src/index.js"></script>
10+
<script src="../src/index.tsx"></script>
1111
</body>
1212
</html>

‎fluent-react/example/public/pl.ftl‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
hello = Cześć { $userName }!
2+
hello-no-name = Witaj nieznajomy!
3+
type-name =
4+
.placeholder = Twoje imię
5+
6+
# $date (Date) - Current date, formatted as month and day.
7+
today-date = Dziś jest {$date}.
8+
9+
# Commented out to demonstrate fallback.
10+
# $date (Date) - Current date, formatted as weekday.
11+
# today-weekday = Jest {$date}.
12+
13+
sign-in-or-cancel = <signin>Zaloguj</signin> albo <cancel>anuluj</cancel>.
14+
clicked-sign-in = Brawo!
15+
clicked-cancel = OK, nieważne.

‎fluent-react/example/src/App.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { useState } from "react";
2+
import { Localized } from "@fluent/react";
3+
import { FluentDateTime } from "@fluent/bundle";
4+
import { Hello } from "./Hello";
5+
import { LocalizedSignIn } from "./SignIn";
6+
7+
export function App() {
8+
let [date] = useState(() => new Date());
9+
return <>
10+
<Hello />
11+
12+
<Localized
13+
id="today-date"
14+
vars={{
15+
date: new FluentDateTime(date.getTime(), {
16+
month: "long",
17+
day: "numeric",
18+
})
19+
}}
20+
>
21+
<p>
22+
{"Today is {$date}."}
23+
</p>
24+
</Localized>
25+
26+
<Localized
27+
id="today-weekday"
28+
vars={{
29+
date: new FluentDateTime(date.getTime(), {
30+
weekday: "long",
31+
})
32+
}}
33+
>
34+
<p>
35+
{"It's {$date}."}
36+
</p>
37+
</Localized>
38+
39+
<LocalizedSignIn />
40+
</>;
41+
}

‎fluent-react/example/src/Hello.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { useState } from "react";
2+
import { Localized } from "@fluent/react";
3+
4+
export function Hello() {
5+
let [userName, setUserName] = useState("");
6+
7+
return (
8+
<div>
9+
{userName ?
10+
<Localized id="hello" vars={{ userName }}>
11+
<h1>{'Hello, { $userName }!'}</h1>
12+
</Localized>
13+
:
14+
<Localized id="hello-no-name">
15+
<h1>Hello, stranger!</h1>
16+
</Localized>
17+
}
18+
19+
<Localized id="type-name" attrs={{ placeholder: true }}>
20+
<input
21+
type="text"
22+
placeholder="Type your name"
23+
onChange={evt => setUserName(evt.target.value)}
24+
value={userName}
25+
/>
26+
</Localized>
27+
</div>
28+
);
29+
}

‎fluent-react/example/src/SignIn.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import { Localized, withLocalization, WithLocalizationProps } from "@fluent/react";
3+
4+
function SignIn(props: WithLocalizationProps) {
5+
function showAlert(id: string) {
6+
const { getString } = props;
7+
alert(getString(id));
8+
}
9+
10+
return (
11+
<div>
12+
<Localized
13+
id="sign-in-or-cancel"
14+
elems={{
15+
signin: <button onClick={() => showAlert('clicked-sign-in')}></button>,
16+
cancel: <button className="text" onClick={() => showAlert('clicked-cancel')}></button>
17+
}}
18+
>
19+
<p>{'<signin>Sign in</signin> or <cancel>cancel</cancel>.'}</p>
20+
</Localized>
21+
</div>
22+
);
23+
}
24+
25+
export const LocalizedSignIn = withLocalization(SignIn);

0 commit comments

Comments
 (0)