Initial commit

Author: martitasea

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.env.example

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2021": true,
+    "mocha": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "semi": ["error", "always"],
+    "quotes": ["error", "single"],
+    "indent": ["error", 2]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.eslintrc

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+storybook-static/
+.env
+
+# IDEA
+*.iml
+.project
+.idea/

.gitignore

@@ -0,0 +1,26 @@
+const path = require('path');
+const toPath = (filePath) => path.join(process.cwd(), filePath);
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+  ],
+  webpackFinal: async (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          '@emotion/core': toPath('node_modules/@emotion/react'),
+          'emotion-theming': toPath('node_modules/@emotion/react'),
+        }
+      }
+    };
+  }
+}

.storybook/main.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
+import {ThemeProvider as Emotion10ThemeProvider} from 'emotion-theming';
+
+import '../src/i18n';
+
+import theme from '../src/theme';
+
+export const parameters = {
+  actions: {argTypesRegex: "^on[A-Z].*"},
+  backgrounds: {disable: true},
+  layout: 'fullscreen'
+}
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Material-ui theme',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circle', // Available icons: https://www.chromatic.com/component?appId=5a375b97f4b14f0020b0cda3&name=Basics%7CIcon&buildNumber=13899
+      items: [
+        {value: 'light', left: '⚪', title: 'Light'},
+        {value: 'dark', left: '⚫', title: 'Dark'}
+      ],
+    },
+  },
+};
+
+const withThemeProvider = (Story, context) =>
+  <Emotion10ThemeProvider theme={theme(context.globals.theme)}>
+    <ThemeProvider theme={theme(context.globals.theme)}>
+      <CssBaseline/>
+      <Story {...context} />
+    </ThemeProvider>
+  </Emotion10ThemeProvider>;
+
+export const decorators = [
+  withThemeProvider,
+];

.storybook/preview.js

@@ -0,0 +1,55 @@
+# plantilla-visor-react
+
+Template for a simple viewer, to use it, go to https://github.com/geomatico/plantilla-visor-react and click on 'Use this template', a new repository will be created based on this template.
+If you want to add functionalities, you can see more components here: https://labs.geomatico.es/geocomponents/
+
+## First steps
+
+Rename project in the following files:
+
+- package.json:
+    - name
+    - repository.url
+    - bugs.url
+    - homepage
+- package-lock.json:
+    - name
+- template.html:
+    - Etiqueta `<title>`
+
+## Mapbox version
+
+Not needed with the included versions: react-map-gl v5 (which implies mapbox v1).
+
+If mapbox v2 is needed, do:
+* `npm install react-map-gl@6`
+* Add the `MAPBOX_ACCESS_TOKEN=` empty key (without the token value!) to `.env.example`.
+* Add the `MAPBOX_ACCESS_TOKEN=XXXXXXX` entry with a valid token to `.env`.
+* Pass the `mapboxAccessToken={process.env.MAPBOX_ACCESS_TOKEN}` prop to the `<Map>` instance.
+
+## i18n
+
+We use **i18next** framework to localize our components:
+
+- Web: [https://www.i18next.com/](https://www.i18next.com/)
+- React integration: [https://react.i18next.com/](https://react.i18next.com/)
+
+Usage example on functional component:
+
+```js
+import { useTranslation } from 'react-i18next';
+
+const FunctionalComponent = () => {
+  const { t } = useTranslation();
+  return <h1>{t('welcome')}</h1>
+}
+```
+
+The applied language will be determined by:
+
+1. The `lang` query string. For instance, use [http://localhost:8080/?lang=es](http://localhost:8080/?lang=es).
+2. The browser language preferences.
+3. If detection fails, will default to `es`.
+
+There are other detection strategies available, see
+[https://github.com/i18next/i18next-browser-languageDetector](https://github.com/i18next/i18next-browser-languageDetector).

README.md

@@ -0,0 +1,70 @@
+// eslint-disable-next-line no-undef
+const webpackConfig = require('./webpack.config')({
+  test: true,
+});
+
+// eslint-disable-next-line no-undef
+module.exports = (config) => {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: 'src',
+
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha', 'webpack'],
+
+    plugins: [
+      'karma-webpack',
+      'karma-mocha',
+      'karma-sourcemap-loader',
+      'karma-chrome-launcher',
+      'karma-mocha-reporter'
+    ],
+
+    files: [
+      { pattern: 'test.js', watched: false }
+    ],
+
+    exclude: [],
+
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      'test.js': ['webpack', 'sourcemap'],
+    },
+    webpack: webpackConfig,
+    webpackServer: {
+      noInfo: true,
+    },
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['mocha'],
+
+    mochaReporter: {
+      showDiff: true,
+    },
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // config.LOG_DISABLE config.LOG_ERROR config.LOG_WARN config.LOG_INFO config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity,
+  });
+};