ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(localize): split storybook demos into message, number & date

Browse source
This commit is contained in:
qa46hx 2019-09-27 16:50:15 +02:00 committed by erik
parent 20b77a40b1
commit b9b5b13ac0
11 changed files with 307 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
packages/localize/stories/date.stories.js Normal file
View file

@ -0,0 +1,72 @@
import { storiesOf, html } from '@open-wc/demoing-storybook';
import { css } from '@lion/core';
import { formatDate } from '../index.js';
const formatDateDemoStyle = css`
.demo-table {
border-collapse: collapse;
text-align: right;
}
.demo-table thead > tr {
border-bottom: 1px solid grey;
}
.demo-table thead > tr > :first-child,
.demo-table tbody > tr > :first-child,
.demo-table tfoot > tr > :first-child {
text-align: left;
}
.demo-table th,
.demo-table td {
padding: 8px;
}
`;
storiesOf('Localize System|Date', module).add(
'formatDate',
() => html`
<style>
${formatDateDemoStyle}
</style>
<table class="demo-table">
<thead>
<tr>
<th>Options</th>
<th>Code</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td><code>formatDate(new Date())</code></td>
<td>${formatDate(new Date())}</td>
</tr>
<tr>
<td>Date display</td>
<td>
<code
>formatDate(new
Date(){weekday:'long',year:'numeric',month:'long',day:'2-digit'})</code
>
</td>
<td>
${formatDate(new Date(), {
weekday: 'long',
year: 'numeric',
month: 'long',
day: '2-digit',
})}
</td>
</tr>
<tr>
<td>Locale</td>
<td><code>formatDate(new Date(){locale:'nl-NL'})</code></td>
<td>${formatDate(new Date(), { locale: 'nl-NL' })}</td>
</tr>
</tbody>
</table>
`,
);

204
packages/localize/stories/index.stories.js
View file

@ -1,201 +1,3 @@
import { storiesOf, html } from '@open-wc/demoing-storybook';
import { html as litHtml } from '@lion/core';
import { LionLitElement } from '@lion/core/src/LionLitElement.js';
import {
localize,
LocalizeMixin,
formatNumber,
formatNumberToParts,
getGroupSeparator,
getDecimalSeparator,
formatDate,
parseDate,
getDateFormatBasedOnLocale,
} from '../index.js';
storiesOf('Localize System|Localize', module).add('lit component', () => {
class LitHtmlExample extends LocalizeMixin(LionLitElement) {
static get localizeNamespaces() {
return [
{ 'lit-html-example': locale => import(`./translations/${locale}.js`) },
...super.localizeNamespaces,
];
}
static get properties() {
return {
now: {
type: 'Date',
},
};
}
render() {
// this is as simple as localization can be in JavaScript
// the Promise is used to delay inserting of the content until data is loaded
// for the first time as soon as `now` is provided or changed, it will rerender
// with a new value if locale is changed, there is a preconfigured listener
// to rerender when new data is loaded all thanks to lit-html capabilities
const headerDate = this.msgLit('lit-html-example:headerDate');
const headerNumber = this.msgLit('lit-html-example:headerNumber');
const date = this.now ? this.msgLit('lit-html-example:date', { now: this.now }) : '';
const time = this.now ? this.msgLit('lit-html-example:time', { now: this.now }) : '';
// dateFormat
const options1 = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
};
options1.timeZone = 'UTC';
options1.timeZoneName = 'short';
const dateParse1 = parseDate('01-05-2012');
const dateParse2 = parseDate('12/05/2012');
const dateParse3 = parseDate('1-5-2017');
const dateFormat1 = formatDate(dateParse1, options1);
const dateFormat2 = formatDate(dateParse2, options1);
const dateFormat3 = formatDate(dateParse3, options1);
const dateFormat = getDateFormatBasedOnLocale();
const datum = new Date();
const options2 = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
};
options2.timeZone = 'UTC';
options2.timeZoneName = 'short';
options2.locale = 'ja-JP-u-ca-japanese';
const dateFormatted = formatDate(datum, options2);
// numberFormat
const number1 = formatNumber(123456.789, {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code',
});
const formatNumberToParts1 = formatNumberToParts(123456.789, {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code',
});
let printParts1 = '';
for (let i = 0; i < formatNumberToParts1.length; i += 1) {
printParts1 += `{ ${formatNumberToParts1[i].type}: ${formatNumberToParts1[i].value} }`;
}
const number2 = formatNumber(1234.5, { style: 'decimal' });
const formatNumberToParts2 = formatNumberToParts(1234.5, { style: 'decimal' });
let printParts2 = '';
for (let i = 0; i < formatNumberToParts2.length; i += 1) {
printParts2 += `{ ${formatNumberToParts2[i].type}: ${formatNumberToParts2[i].value} }`;
}
const number3 = formatNumber(-1234.5, {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code',
});
const formatNumberToParts3 = formatNumberToParts(-1234.5, {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'code',
});
let printParts3 = '';
for (let i = 0; i < formatNumberToParts3.length; i += 1) {
printParts3 += `{ ${formatNumberToParts3[i].type}: ${formatNumberToParts3[i].value} }`;
}
const printGroupSeparator = getGroupSeparator();
const printDecimalSeparator = getDecimalSeparator();
return litHtml`
<h2>${headerDate}</h2>
<div>${date}</div>
<div>Order of date parts: ${dateFormat}</div>
<div>Parsed date (01-05-2012): ${dateFormat1}</div>
<div>Parsed date (12/05/2012): ${dateFormat2}</div>
<div>Parsed date (1/5/2017) : ${dateFormat3}</div>
<div>Japanese date: ${dateFormatted}</div>
<div>${time}</div>
<h2>${headerNumber}</h2>
<div>${number1} ${printParts1}</div>
<div>${number2} ${printParts2}</div>
<div>${number3} ${printParts3}</div>
<div>getGroupSeparator(): "${printGroupSeparator}"</div>
<div>getDecimalSeparator(): "${printDecimalSeparator}"</div>
`;
}
}
if (!customElements.get('lit-html-example')) {
customElements.define('lit-html-example', LitHtmlExample);
}
return html`
<lit-html-example .now=${new Date()}></lit-html-example>
<button
@click=${() => {
localize.locale = 'en-GB';
}}
>
en-GB
</button>
<button
@click=${() => {
localize.locale = 'en-US';
}}
>
en-US
</button>
<button
@click=${() => {
localize.locale = 'en-AU';
}}
>
en-AU
</button>
<button
@click=${() => {
localize.locale = 'nl-NL';
}}
>
nl-NL
</button>
<button
@click=${() => {
localize.locale = 'nl-BE';
}}
>
nl-BE
</button>
`;
});
// .add('message', () => {
// const en = {
// bar: '[en] hello from bar',
// foo: '[en] hey there from foo',
// };
// const enGB = {
// ...en,
// foo: '[en-GB] hey there from foo',
// };
// try {
// localize.addData('en', 'demo', en);
// localize.addData('en-GB', 'demo', enGB);
// } catch (error) { /* demo will get executed multiple times */ }
//
// return html`
// <p>try 'demo:bar' as well</p>
// <input type="text" value="demo:foo" id="keyInput">
//
// <button @click=${() => console.log(localize.msg(keyInput.value))}>
// Translate to Action Logger
// </button>
// <br />
// <button @click=${() => { localize.locale = 'en'; }}>en</button>
// <button @click=${() => { localize.locale = 'en-GB'; }}>en-GB</button>
// <br /><br />
// <button @click=${() => console.log(localize.__storage)}>
// Log available Data to Action Logger
// </button>
// `;
import './message.stories.js';
import './number.stories.js';
import './date.stories.js';

65
packages/localize/stories/message.stories.js Normal file
View file

@ -0,0 +1,65 @@
import { storiesOf, html } from '@open-wc/demoing-storybook';
import { LionLitElement } from '@lion/core/src/LionLitElement.js';
import { localize, LocalizeMixin } from '../index.js';
storiesOf('Localize System|Message', module).add('locale', () => {
class messageExample extends LocalizeMixin(LionLitElement) {
static get localizeNamespaces() {
return [
{ 'lit-html-example': locale => import(`./translations/${locale}.js`) },
...super.localizeNamespaces,
];
}
render() {
return html`
<div aria-live="polite">
<h1>${this.msgLit('lit-html-example:header', { locale: localize.locale })}</h1>
<p>${this.msgLit('lit-html-example:body')}</p>
</div>
`;
}
}
if (!customElements.get('message-example')) {
customElements.define('message-example', messageExample);
}
return html`
<button
@click=${() => {
localize.locale = 'en-GB';
}}
>
en-GB
</button>
<button
@click=${() => {
localize.locale = 'en-US';
}}
>
en-US
</button>
<button
@click=${() => {
localize.locale = 'en-AU';
}}
>
en-AU
</button>
<button
@click=${() => {
localize.locale = 'nl-NL';
}}
>
nl-NL
</button>
<button
@click=${() => {
localize.locale = 'nl-BE';
}}
>
nl-BE
</button>
<message-example></message-example>
`;
});

158
packages/localize/stories/number.stories.js Normal file
View file

@ -0,0 +1,158 @@
import { storiesOf, html } from '@open-wc/demoing-storybook';
import { css } from '@lion/core';
import { formatNumber, formatNumberToParts } from '../index.js';
const formatNumberDemoStyle = css`
.demo-table {
border-collapse: collapse;
text-align: right;
}
.demo-table thead > tr {
border-bottom: 1px solid grey;
}
.demo-table thead > tr > :first-child,
.demo-table tbody > tr > :first-child,
.demo-table tfoot > tr > :first-child {
text-align: left;
}
.demo-table th,
.demo-table td {
padding: 8px;
}
`;
const value = 1234.56;
storiesOf('Localize System|Number', module)
.add(
'formatNumber',
() => html`
<style>
${formatNumberDemoStyle}
</style>
<p>Formatted value is ${value}</p>
<table class="demo-table">
<thead>
<tr>
<th>Options</th>
<th>Code</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td></td>
<td>${formatNumber(value)}</td>
</tr>
<tr>
<td>Currency symbol</td>
<td>
<code
>formatNumber({ style: 'currency', currencyDisplay: 'symbol', currency: 'EUR'
})</code
>
</td>
<td>
${formatNumber(value, {
style: 'currency',
currencyDisplay: 'symbol',
currency: 'EUR',
})}
</td>
</tr>
<tr>
<td>Currency code</td>
<td>
<code
>formatNumber({ style: 'currency', currencyDisplay: 'code', currency: 'EUR' })</code
>
</td>
<td>
${formatNumber(value, {
style: 'currency',
currencyDisplay: 'code',
currency: 'EUR',
})}
</td>
</tr>
<tr>
<td>Locale</td>
<td><code>formatNumber({ locale: 'nl-NL' })</code></td>
<td>${formatNumber(value, { locale: 'nl-NL' })}</td>
</tr>
<tr>
<td>No decimals</td>
<td>
<code>formatNumber({ minimumFractionDigits: 0, maximumFractionDigits: 0, })</code>
</td>
<td>
${formatNumber(value, {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
})}
</td>
</tr>
</tbody>
</table>
`,
)
.add(
'formatNumberToParts',
() => html`
<style>
${formatNumberDemoStyle}
</style>
<p>Formatted value is ${value}</p>
<table class="demo-table">
<thead>
<tr>
<th>Part</th>
<th>Output</th>
</tr>
</thead>
<tbody>
${formatNumberToParts(value, { style: 'currency', currency: 'EUR' }).map(
part => html`
<tr>
<td>${part.type}</td>
<td>${part.value}</td>
</tr>
`,
)}
</tbody>
</table>
`,
)
.add(
'Common locales',
() => html`
<style>
${formatNumberDemoStyle}
</style>
<p>Formatted value is ${value}</p>
<table class="demo-table">
<thead>
<tr>
<th>Locale</th>
<th>Output Euro</th>
<th>Output US Dollar</th>
</tr>
</thead>
<tbody>
${['en-GB', 'en-US', 'nl-NL', 'nl-BE', 'fr-FR', 'de-DE'].map(
locale => html`
<tr>
<td>${locale}</td>
<td>${formatNumber(value, { locale, style: 'currency', currency: 'EUR' })}</td>
<td>${formatNumber(value, { locale, style: 'currency', currency: 'USD' })}</td>
</tr>
`,
)}
</tbody>
</table>
`,
);

3
packages/localize/stories/translations/en-AU.js
View file

@ -2,6 +2,5 @@ import en from './en.js';
export default {
...en,
headerDate: 'en-AU: Date & Time',
headerNumber: 'en-AU: Number formatting',
body: 'I am from Australia',
};

3
packages/localize/stories/translations/en-GB.js
View file

@ -2,6 +2,5 @@ import en from './en.js';
export default {
...en,
headerDate: 'en-GB: Date & Time',
headerNumber: 'en-GB: Number formatting',
body: 'I am from England',
};

3
packages/localize/stories/translations/en-US.js
View file

@ -2,6 +2,5 @@ import en from './en.js';
export default {
...en,
headerDate: 'en-US: Date & Time',
headerNumber: 'en-US: Number formatting',
body: 'I am from the USA',
};

6
packages/localize/stories/translations/en.js
View file

@ -1,6 +1,4 @@
export default {
headerDate: 'en: Date & Time',
headerNumber: 'en: Number formatting',
date: 'Today is {now, date, full}.',
time: 'Time is {now, time, full}.',
header: '{ locale }: Localize message example',
body: 'I am English',
};

3
packages/localize/stories/translations/nl-BE.js
View file

@ -2,6 +2,5 @@ import nl from './nl.js';
export default {
...nl,
headerDate: 'nl-BE: Datum en tijd',
headerNumber: 'nl-BE: Nummer formatting',
body: 'Ik kom uit Belgie',
};

3
packages/localize/stories/translations/nl-NL.js
View file

@ -2,6 +2,5 @@ import nl from './nl.js';
export default {
...nl,
headerDate: 'nl-NL: Datum en tijd',
headerNumber: 'nl-NL: Nummer formatting',
body: 'Ik kom uit Nederland',
};

6
packages/localize/stories/translations/nl.js
View file

@ -1,6 +1,4 @@
export default {
headerDate: 'nl: Datum en tijd',
headerNumber: 'nl: Nummer formatting',
date: 'Vandaag is {now, date, full}.',
time: 'Tijd is {now, time, full}.',
header: '{ locale }: Localize message voorbeeld',
body: 'Ik kom uit Nederland',
};