resolve conflicts

Telefonica · Jun 4, 2024 · 57c6978 · 57c6978
2 parents 4303531 + 0b3253e
commit 57c6978
Show file tree

Hide file tree

Showing 86 changed files with 5,253 additions and 4 deletions.
diff --git a/examples/vite/.eslintrc.cjs b/examples/vite/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+    root: true,
+    env: {browser: true, es2020: true},
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+    ],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh'],
+    rules: {
+        'react-refresh/only-export-components': ['warn', {allowConstantExport: true}],
+    },
+};
diff --git a/examples/vite/.gitignore b/examples/vite/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# For this example we're ignoring the whole .yarn folder. Configure as needed in your project
+.yarn
diff --git a/examples/vite/.yarnrc.yml b/examples/vite/.yarnrc.yml
@@ -0,0 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+yarnPath: .yarn/releases/yarn-4.2.2.cjs
diff --git a/examples/vite/README.md b/examples/vite/README.md
@@ -0,0 +1,42 @@
+# React + TypeScript + Vite + Mistica
+
+This template provides a minimal setup to get React working in Vite with HMR, some ESLint rules and using
+Mistica Design System.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)
+  uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for
+  Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware
+lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+};
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or
+  `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add
+  `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+## Notes
+
+The `package.json` has a `resolutions` property to force the `@swc/core` version to workarond
+[this issue](https://github.com/swc-project/swc/issues/8996#issuecomment-2137309969). Once fixed you can
+remove it.
diff --git a/examples/vite/index.html b/examples/vite/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS + Mistica</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -0,0 +1,34 @@
+{
+    "name": "mistica-example-vite",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@telefonica/mistica": "^15.9.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+    },
+    "devDependencies": {
+        "@swc/cli": "^0.3.12",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@typescript-eslint/eslint-plugin": "^7.11.0",
+        "@typescript-eslint/parser": "^7.11.0",
+        "@vitejs/plugin-react-swc": "^3.7.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.12"
+    },
+    "packageManager": "[email protected]",
+    "resolutions": {
+        "@swc/core": "1.5.7"
+    }
+}
diff --git a/examples/vite/public/vite.svg b/examples/vite/public/vite.svg
diff --git a/examples/vite/src/app.tsx b/examples/vite/src/app.tsx
@@ -0,0 +1,38 @@
+import {
+    Form,
+    Box,
+    Stack,
+    TextField,
+    EmailField,
+    ButtonLayout,
+    ButtonPrimary,
+    useDialog,
+    ResponsiveLayout,
+} from '@telefonica/mistica';
+
+const App = () => {
+    const {alert} = useDialog();
+    return (
+        <ResponsiveLayout>
+            <Form
+                onSubmit={(formData) =>
+                    alert({
+                        title: 'This is your data',
+                        message: JSON.stringify(formData, null, 2),
+                    })
+                }
+            >
+                <Box padding={16}>
+                    <Stack space={16}>
+                        <img height={40} src="/vite.svg" alt="Vite Logo" />
+                        <TextField name="name" label="Name" autoComplete="name" />
+                        <EmailField name="email" label="E-mail" autoComplete="email" />
+                        <ButtonLayout primaryButton={<ButtonPrimary submit>Send</ButtonPrimary>} />
+                    </Stack>
+                </Box>
+            </Form>
+        </ResponsiveLayout>
+    );
+};
+
+export default App;
diff --git a/examples/vite/src/main.tsx b/examples/vite/src/main.tsx
@@ -0,0 +1,20 @@
+import '@telefonica/mistica/css/reset.css';
+import '@telefonica/mistica/css/roboto.css';
+import '@telefonica/mistica/css/mistica.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './app.tsx';
+import {ThemeContextProvider, getMovistarSkin} from '@telefonica/mistica';
+
+const theme = {
+    skin: getMovistarSkin(),
+    i18n: {locale: 'en-GB', phoneNumberFormattingRegionCode: 'ES'},
+} as const;
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+        <ThemeContextProvider theme={theme}>
+            <App />
+        </ThemeContextProvider>
+    </React.StrictMode>
+);
diff --git a/examples/vite/src/vite-env.d.ts b/examples/vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/vite/tsconfig.json b/examples/vite/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"],
+    "references": [{"path": "./tsconfig.node.json"}]
+}
diff --git a/examples/vite/tsconfig.node.json b/examples/vite/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "strict": true
+    },
+    "include": ["vite.config.ts"]
+}
diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts
@@ -0,0 +1,7 @@
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+});