jesperorb / intl-explorer

Intl Explorer is an interactive tool for experimenting and trying out the ECMAScript Internationalization API.

Intl Explorer

Intl Explorer is an interactive tool for experimenting and trying out the ECMAScript Internationalization API. The API is available under the namespace Intl in JavaScript and provides language sensitive string comparison, number formatting, and date and time formatting.

Live site

https://intl-explorer.com/

Running

This repo uses pnpm

1. Install dependencies: pnpm install.
2. Run devserver: pnpm dev.
3. Visit: http://127.0.0.1:5173/.

Building

1. Run command: pnpm build.

Contributing

See the contributing guide for detailed instructions on how to get started with our project.

intl-explorer's Issues

Run automated a11y tests

Is your feature request related to a problem? Please describe.

Implement a11y check in tests

Describe the solution you'd like

Run automated a11y tests via: https://github.com/abhinaba-ghosh/axe-playwright

Max/Min digits for NumberFormat in Playground not working as expected

Describe the bug
Input is not reflected in the input field but is set correctly on the schema.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'NumberFormat' Page
2. Enter something in digit fields
3. Input does not update/crash with faulty values

Expected behavior
Should show input value in field and value should be set to schema

Add Locale picker to every page

Is your feature request related to a problem? Please describe.
Better visibility of the locale picker.

Describe the solution you'd like
Place it on every page instead of only in the sidebar.

Browser support data for secondary formatters is not updated when changing method in Playground

Describe the bug
When a user changes the method in the Playground the compat data for the secondary formatters do not change to reflect the current selected formatter.

To Reproduce
Steps to reproduce the behavior:

1. Go to Playground Page
2. Select a method that has secondary formatters
3. Change method
4. See that the compat data for formatters do not change

Expected behavior
Compat data should be reactive to method

sidebar css issues

Describe the bug
A clear and concise description of what the bug is.

Can't scroll the sidebar to see the github link & there is no scrollbar to indicate that there is more content.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...' any page
2. Scroll down to '....' move cursor to sidebar, try to scroll, nothing happens

Expected behavior
A clear and concise description of what you expected to happen.

Sidebar out of view content scrolls into view.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] windows 10
• Browser [e.g. chrome, safari] latest vivaldi & edge
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

If you add overflow: auto to .sidebar on the web version everything works as expected.
I forked this and tried to make this little fix myself but there is also other css problems.
Running the pnpm dev and on localhost:
there is no padding after the github link, and running under 900px width, the sidebar doesn't hide all the way to the right and the togglebutton disappears completely.

DateTimeFormat Playground options is missing a year option

Describe the bug

The Playground page for DateTimeFormat should have a year option in the "Options" section, but it is missing

To Reproduce
Steps to reproduce the behavior:

1. Go to Playground page for DateTimeFormat.
2. If DateTimeFormat is not selected, select it in the Method dropdown.
3. Scroll down to the Options section.

Expected behavior
There should be a year dropdown, corresponding to the year option in the DateTimeFormat constructor options.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Brave
• Version 1.49.132

Visualize Number.toLocaleString() in relation to NumberFormat

Is your feature request related to a problem? Please describe.

The prototype for Number in JavaScript can also be used to format a number to a currency or a unit using Number.prototype.toLocaleString().

This means that you do not always have to call new Intl.NumberFormat when formatting a number instead you can format a variable directly:

const num = 1_000;
const formatted = num.toLocaleString('sv', {
    style: "currency",
    currency: "SEK"
});

Describe the solution you'd like

Present this possible solution in some way on the NumberFormat-page.

Validate input on Playground

Describe the bug
Playground input is not validated for NaN values

To Reproduce
Steps to reproduce the behavior:

1. Go to Playground Page
2. Click on NumberFormat method
3. Input empty string into input field
4. See NaN

Implement a different Date Picker

Is your feature request related to a problem? Please describe.

The date picker used is the builtin <input type="datetime-local">. The picker is a bit finicky, and ambiguous in its representation of the value it holds.

Describe the solution you'd like
Replace the date picker with a custom date picker

Describe alternatives you've considered

• Investigate possible alternatives

Playground code output does not show options if the only option has the value of boolean

Describe the bug

Playground code output does not show options if the only option has the value of boolean and that value is false.

The option only show up if you have selected another option in combination with a value that is a boolean. Giving the impression that the option has not been applied but it has in fact been applied but the output does not reflect it.

To Reproduce
Steps to reproduce the behavior:

1. Go to Playground Page
2. Select a Method with a boolean toggle value such as "Collator"
3. Set a boolean value to false while all other options are undefined.
4. Look at code output

Expected behavior
The output should display options for the value like following:

"key": false

Actual behavior

The output does not change in the code output.

Desktop (please complete the following information):

• OS: MacOS
• Browser Firefox