npm - @webpros/tsxuserprofilevue - Versions diffs - 3.0.0 - Mend

@webpros/tsxuserprofilevue 3.0.0

Files changed (18) hide show

package/.nvmrc +1 -0
package/.prettierrc +6 -0
package/LICENSE.md +21 -0
package/README.md +132 -0
package/collectTranslationKeys.js +11 -0
package/crowdin.yml +3 -0
package/dist/favicon.ico +0 -0
package/dist/index.html +32 -0
package/dist/index.js +3 -0
package/dist/mockServiceWorker.js +303 -0
package/dist/style.css +1 -0
package/env.d.ts +1 -0
package/histoire.config.ts +7 -0
package/histoire.setup.ts +7 -0
package/index.html +30 -0
package/package.json +92 -0
package/tsconfig.tsbuildinfo +1 -0
package/vitest.setup.js +9 -0

package/.nvmrc ADDED Viewed

	@@ -0,0 +1 @@
1	+ 18

package/.prettierrc ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true
+}

package/LICENSE.md ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2021 YOUR NAME
+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.

package/README.md ADDED Viewed

@@ -0,0 +1,132 @@
+# 360 User Profile
+A web component that displays a user's information.
+## Install
+```shell
+npm i @webpros/tsxuserprofile
+```
+** Alternative with a CDN**
+Or download as script from this URL
+```html
+<script type="module" crossorigin src="https://unpkg.com/@webpros/tsxuserprofile/dist/index.js"></script>
+```
+## Usage
+The user profile `<tsx-user-profile>` is simply installed in the space provided, the component itself only outputs the content, if a different background colour, round corners, shadows etc. are required, this should be added via a wrapper in which the component is installed.
+The component itself also only controls the display of the data, it has no direct connection to an API, all events are therefore sent out via [MITT](https://github.com/developit/mitt) events.
+The component is controlled via three props: `current-language`, `user-data`, `inactive-fields`. The data is transmitted as a string (or JSON string) according to the WebComponent specification.
+### Example
+```html
+<body>
+<tsx-user-profile
+  current-language="de"
+  user-data="JSON.stringify(myUserData)"
+  inactive-fields="[]"
+/>
+</body>
+```
+### Props
+- `current-language <string>` The current language used
+- `user-data <JSON object>` The data of the user
+- `inactive-fields <JSON array>` Specifying the profile blocks that you want to deactivate
+## Usage with Frontend Frameworks
+### Vue / Nuxt
+So that Vue does not treat these elements as regular Vue components the tags must be ignored. The easiest way is to include the elements using `plugin`.
+```js
+import Vue from 'vue'
+import '@webpros/tsxuserprofile'
+Vue.config.ignoredElements = [
+  'tsx-user-profile'
+]
+```
+### React / Next
+Currently no findings.
+## Languages
+To change the language of the user profile, pass the language code through the prop to the application. Eight languages are available
+```typescript
+type TLanguage = 'de' | 'en' | 'fr' | 'es' | 'it' | 'ja' | 'ru' | 'pt'
+```
+## UserData
+Via the user data, we transmit meta information of the user, such as the time zone, name, avatar and email. All information is optional.
+_If no timezone is transmitted, the profile will use the timezone from the user's browser as soon as it is called up and automatically transmit it to the API._
+```typescript
+interface IProfileUser {
+  name?: string
+  email?: string
+  avatar?: string
+  timezone?: null | string
+}
+```
+## InactiveFields
+This prop can be used to specifically deactivate blocks of the profile, either because they should not be displayed in general, or because perhaps only the time zone should be visible at that point.
+Currently the `avatar`, `email` and the `timezone` can be deactivated.
+```typescript
+interface IInactiveFields {
+  values: Array<'avatar' | 'email' | 'timezone'>
+}
+```
+## Events
+All click events are passed on to the outside as MITT events.
+**Example**
+```typescript
+window.mitt.on('tsxUserProfile', (payload) => {
+  if (payload.timezone) {
+    console.log('Hello from changed Timezone', payload.timezone)
+  }
+})
+```
+## Colors
+The colors are defined using CSSVars and must be included either inline or in the custom stylesheet.
+```css
+:root {
+  --tsxup-brightest: #ffffff;
+  --tsxup-brightest-darker: #e5e7eb;
+  --tsxup-darkest: #111827;
+  --tsxup-darkest-light: #4b5563;
+  --tsxup-signal-success: #4CA154;
+  --tsxup-signal-error: #b73737;
+  --tsxup-primary: #1E40AF;
+  --tsxup-primary-light: #668bca;
+  /* -- Specific Element CSS Vars */
+  --tsxup-text: var(--tsxup-darkest);
+  --tsxup-text-lighter: var(--tsxup-darkest-light);
+  --tsxup-headline: var(--tsxup-darkest);
+  --tsxUp-button-color: var(--tsxup-brightest);
+  --tsxUp-button-bg: var(--tsxup-primary);
+  --tsxUp-button-color-hover: var(--tsxup-brightest);
+  --tsxUp-button-bg-hover: var(--tsxup-primary-light);
+  --tsxUp-selectField-border: var(--tsxup-brightest-darker);
+  --tsxUp-selectField-background: var(--tsxup-brightest);
+  --tsxUp-selectField-backgroundHover: var(--tsxup-brightest);
+  --tsxUp-selectField-backgroundDisabled: var(--tsxup-brightest-darker);
+  --tsxUp-selectField-color: var(--tsxup-darkest);
+  --tsxUp-selectField-selectedBackground: var(--tsxup-primary-light);
+  --tsxUp-selectField-selectedColor: var(--tsxup-brightest);
+}
+```

package/collectTranslationKeys.js ADDED Viewed

@@ -0,0 +1,11 @@
+const fs = require('fs')
+const locale = require('./src/locales/en.json')
+const keysArray = Object.keys(locale)
+fs.writeFile('./src/types/localeKeys.ts', `export type TLocaleKeys = ['${keysArray.join("', '")}'][number]`, function (err) {
+  if (err) {
+    return console.error(err)
+  }
+  console.log('Keys array has been saved to keys.js')
+})

package/crowdin.yml ADDED Viewed

@@ -0,0 +1,3 @@
+files:
+  - source: /src/locales/en.json
+    translation: /src/locales/%two_letters_code%.json

package/dist/favicon.ico ADDED Viewed

Binary file

package/dist/index.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="w-screen min-h-full" lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- <script
+  src="https://code.jquery.com/jquery-3.6.3.min.js"
+  integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
+  crossorigin="anonymous"></script> -->
+  <title>TITLE</title>
+  <script type="module" crossorigin src="/index.js"></script>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <!-- <tsx-user-profile
+  current-language="de"
+  user-data='{"name":"Sascha Georg Fuchs","email":"features@leankoala.com"}'
+  inactive-fields="[]"
+  ></tsx-user-profile> -->
+  <div id="app"></div>
+  <!-- <script>
+    console.log('hello start')
+    $(document).ready(function () {
+      console.log('hello finished')
+    });
+  </script> -->
+</body>
+</html>