feat: initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules
+
+# dotenv environment variables file
+.envrc
+
+# build directory
+dist
+
+# Operating system temp files
+.DS_Store
+
+# Docz in development
+.docz
+
+# Coverage report
+coverage
+
+# Rollup
+.rpt2_cache
+
+#IDE settings files
+.vscode

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "trailingComma": "es5"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Marcio Barrios
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,79 @@
+# react-intl-datetime-format
+
+Tiny React component wrapping the ECMAScript Internationalization API with sane defaults to format dates and times.
+
+To see in detail the component `Date` with the list of props and examples please [check the documentation site]().
+
+You can also play with `react-intl-datetime-format` in a [CodeSandbox]().
+
+## Features
+
+- Effortless format dates and times for different locales
+- Relies in the standard [Intl.DateTimeFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
+- Possibility to use it as an standalone React Component using props to configure it
+- Possibility to use a general config using a React Context Provider
+- Detects automatically the browser language as a default locale
+- Exposes a function to update the Provider config
+- Ability to render a date or a time with any html tag
+- Props match [Intl.DateTimeFormat constructor arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters)
+
+## Support
+
+- [Works in any modern browsers, and IE >= 11](https://caniuse.com/#feat=internationalization)
+
+## Installation
+
+```shell
+npm i react-intl-datetime-format
+```
+
+## Usage
+
+This is the easiest way to use `Date` formatter component:
+
+```js
+import { Date } from "react-intl-datetime-format";
+
+// renders 12/3/1983
+const Foo = () => <Date locale="de-DE">{new Date("03 dec 1983")}</Date>;
+```
+
+You don't even need to pass a `locale` prop, by default it will try guess the locale from the browser.
+
+## Recommended usage with a React Context Provider
+
+The recommended way to use it would be with a Context.Provider, this will allow you to have a global configuration so you don't need to pass props every time you format a date or time.
+
+A provider `IntlProvider` is exposed with a default config, but you can you set your own config and use it in your `App` component.
+
+```js
+// In your App.js or similar...
+import { IntlProvider } from "react-intl-datetime-format";
+
+const intlConfig = {
+  locale: "en-US",
+  options: {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZoneName: "short"
+  }
+};
+
+const App = () => <IntlProvider config={intlConfig}>...</IntlProvider>;
+
+// In any other part of your code
+import { Date } from "react-intl-datetime-format";
+
+const date = new Date(2012, 11, 20, 3, 0, 0)
+
+const HelloWorld = () => (
+  // renders "December 20, 2012, 4:00:00 AM GMT+1" (based on the provider config)
+  <Date>{date}</Date>
+);
+```
+
+The configuration object that `IntlProvider` expects is basically matching [the arguments from Intl.DateTimeFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters).

babel.config.js

@@ -0,0 +1,4 @@
+// Babel is only used for Jest
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react"],
+}

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ["@commitlint/config-conventional"] }

docs/introduction.mdx

@@ -0,0 +1,88 @@
+---
+name: Introduction
+route: /
+---
+
+# react-intl-datetime-format
+
+Tiny React component wrapping the ECMAScript Internationalization API with sane defaults to format dates and times.
+
+## Features
+
+- Effortless format dates and times for different locales
+- Relies in the standard [Intl.DateTimeFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
+- Possibility to use it as an standalone React Component using props to configure it
+- Possibility to use a general config using a React Context Provider
+- Detects automatically the browser language as a default locale
+- Exposes a function to update the Provider config
+- Ability to render a date or a time with any html tag
+- Props match [Intl.DateTimeFormat constructor arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters)
+
+## Support
+
+- [Works in any modern browsers, and IE >= 11](https://caniuse.com/#feat=internationalization)
+
+## Installation
+
+```shell
+npm i react-intl-datetime-format
+```
+
+## Usage
+
+This is the easiest way to use `DateTime` formatter component:
+
+```js
+import { DateTime } from "react-intl-datetime-format"
+
+// renders 3/12/1983
+const Foo = () => <DateTime locale="es-ES">03 dec 1983</DateTime>
+```
+
+You don't even need to pass a `locale` prop, by default it will try guess the locale from the browser.
+
+## Recommended usage with a React Context Provider
+
+The recommended way to use it would be with a Context.Provider, this will allow you to have a global configuration so you don't need to pass props every time you format a date or time.
+
+A provider `IntlProvider` is exposed with a default config, but you can you set your own config and use it in your `App` component.
+
+```js
+// In your App.js or similar...
+import { IntlProvider } from "react-intl-datetime-format"
+
+const intlConfig = {
+  locale: "en-US",
+  options: {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZoneName: "short",
+  },
+}
+
+const App = () => <IntlProvider config={intlConfig}>...</IntlProvider>
+
+// In any other part of your code
+import { DateTime } from "react-intl-datetime-format"
+
+const date = new Date(2012, 11, 20, 3, 0, 0)
+
+const HelloWorld = () => (
+  // renders "December 20, 2012, 4:00:00 AM GMT+1" (based on the provider config)
+  <Date>{date}</Date>
+)
+```
+
+The configuration object that `IntlProvider` expects is basically matching [the arguments from Intl.DateTimeFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters).
+
+## Possible imports
+
+You can import several things from `react-intl-datetime-format`, let's check the possibilities:
+
+- `Date` Component to format date and times
+- `IntlProvider` to set a global configuration
+- `useIntl` hook to update the configuration

docs/recipes.mdx

@@ -0,0 +1,91 @@
+---
+name: Recipes
+route: /recipes
+---
+
+# Recipes
+
+## Recommended usage with a React Context Provider
+
+The recommended way to use it would be with a [React Context](https://reactjs.org/docs/context.html), this will allow you to have a global configuration so you don't need to pass props every time you format a date.
+
+A provider `IntlProvider` is exposed with a default config, but you can you set your own config and use it in your `App` component.
+
+```js
+// In your App.js or similar wrapping the rest of elements
+import { IntlProvider } from "react-intl-datetime-format";
+
+const intlConfig = {
+  locale: "en-US",
+  options: {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZoneName: "short"
+  }
+};
+
+const App = () => (
+  <IntlProvider config={intlConfig}>
+    <HelloWorld />
+  </IntlProvider>
+);
+
+// In any other file
+import { Date } from "react-intl-datetime-format";
+
+// Other formats are accepted instead of a Date instance, for example just "02 dec 1983"
+const date = new Date(2012, 11, 20, 3, 0, 0)
+
+const HelloWorld = () => (
+  // renders "December 20, 2012, 4:00:00 AM GMT+1" (based on the IntlProvider config)
+  <Date>{date}</Date>
+);
+```
+
+The configuration object that `IntlProvider` expects is basically matching [the arguments from Intl.DateTimeFormat constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters).
+
+## Change the Context Provider configuration programatically
+
+You can update the Provider configuration easily in case you need it:
+
+```js
+// In your App.js or similar...
+import { IntlProvider } from "react-intl-datetime-format"
+
+const intlConfig = {
+  locale: "en-US",
+  options: {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZoneName: "short"
+  }
+};
+
+const App = () => <IntlProvider config={intlConfig}>...</IntlProvider>
+
+// In any other part of your code
+import { useIntl } from "react-intl-datetime-format"
+
+const UpdateFormatConfig = () => (
+  const { setConfig } = useIntl()
+
+  const newConfig = {
+    locale: "de-DE",
+    options: {
+      timeZoneName: "long"
+    },
+  }
+
+  return (
+    <button onClick={() => setConfig(newConfig)}>Update format config</button>
+  )
+)
+```

doczrc.js

@@ -0,0 +1,4 @@
+export default {
+  codeSandbox: false,
+  menu: ["Introduction", "Recipes"],
+}

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  collectCoverage: true,
+  collectCoverageFrom: ["src/*/*.js", "!src/*/index.js"]
+};