✨ initial commit

it-at-m · Apr 4, 2024 · 933e862 · 933e862
1 parent 9cc1933
commit 933e862
Show file tree

Hide file tree

Showing 30 changed files with 4,417 additions and 24 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}
diff --git a/Dockerfile b/Dockerfile
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 ## Customize this file after creating the new REPO and remove this lines.
+
 What to adjust:  
 * Add the your project or repo name direct under the logo.
 * Add a short and long desciption.
@@ -12,40 +13,59 @@ What to adjust:
 ## ------- end to remove -------
 <!-- add Project Logo, if existing -->
 
-# repo or project name
+# muc-patternlab-vue
+
+This repository contains a ready-to-use Vue-Components-Library based on munich.de's MDE5 Patternlab patternlab.muenchen.space
 
-*Add a description from your project here.*
+In it's current state only some components exist. The library will continuely grow as the need for new components grows.
 
+We intend to let this project be a community project in which every developer who needs new components contributes the results of his work into this library.
 
 ### Built With
 
 The documentation project is built with technologies we use in our projects:
 
-* *write here the list of used technologies*
+* Vue 3
+* MDE5 Patternlab
 
 ## Roadmap
 
-*if you have a ROADMAP for your project add this here*
+In the near future we plan to
 
+- Integrate Storybook.js to showcase components
+- Create more components
+- Integrate MDE5 Patternlab npm-Package as soon as it's available
 
 See the [open issues](#) for a full list of proposed features (and known issues).
 
-
 ## Set up
-*how can i start and fly this project*
 
-## Documentation
-*what insights do you have to tell*
-
-```mermaid
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
+```shell
+git clone https://github.com/it-at-m/muc-patternlab-vue.git
+cd muc-patternlab-vue
+npm install
+npm run dev
 ```
 
-use [diagrams](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams).
+## Documentation
+
+### Adding a new Component
+
+1. Create a new Folder under `./src/components`-Directory
+2. Create Vue-Component (with composition api) and index.ts-File which exports your component
+3. Add your new Component to `./src/components/index.ts`
+
+### Using MDE Patternlab-Icons
+
+Patternlab-Icons are provided by a svg-Sprite which is automatically injected in this repos App.vue-File for local testing. You can expect the users of this library to do the same thing.
+
+So to use an icon from Patternlab you can simply follow the official documentation: https://patternlab.muenchen.space/?p=viewall-guidelines-icons
+
+```html
+<svg aria-hidden="true" class="icon">
+  <use xlink:href="#icon-{name}"></use>
+</svg>
+```
 
 ## Contributing
 

diff --git a/env.d.ts b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Muc Patternlab Vue Components Demo</title>
+
+    <!-- Muenchen.de-Styles -->
+    <link href="src/assets/temporary/muenchende-fontfaces.css" rel="stylesheet">
+    <link href="src/assets/temporary/muenchende-style.css" rel="stylesheet">
+
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+</body>
+</html>