Merge pull request #1 from linked-planet/dev

Dev

Author: marcus-wishes

.eslintrc.json

@@ -0,0 +1,37 @@
+{
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": 2022,
+		"sourceType": "module",
+		"ecmaFeatures": {
+			"jsx": true
+		}
+	},
+	"plugins": [
+		"@typescript-eslint",
+		"react",
+		"react-hooks",
+		"react-refresh",
+		"@atlaskit/eslint-plugin-design-system",
+		"formatjs"
+	],
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:@atlaskit/design-system/recommended",
+		"plugin:react/recommended",
+		"plugin:react-hooks/recommended",
+		"prettier"
+	],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"rules": {
+		"react-hooks/rules-of-hooks": "error",
+		"react-hooks/exhaustive-deps": "warn",
+		"react-refresh/only-export-components": "warn",
+		"@atlaskit/design-system/ensure-design-token-usage": "off"
+	}
+}

.github/workflows/default.yml

@@ -1,81 +1,67 @@
 name: ui-kit-ts - default
 
 on:
-  push:
-    branches:
-      - "main"
-  release:
-    types: [ created ]
-  schedule:
-    - cron: '0 6 * * 1' # At 06:00 on Monday
+    push:
+        branches:
+            - "main"
+    release:
+        types: [created]
+    schedule:
+        - cron: "0 6 * * 1" # At 06:00 on Monday
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '19.1.0'
-      - name: npm install library
-        working-directory: ./library
-        run: npm install
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: "19.1.0"
+            - name: npm install
+              run: npm install
 
-      - name: npm build library
-        working-directory: ./library
-        run: npm run build
+            - name: npm build library
+              run: npm run build:lib
 
-      - name: npm install showcase
-        working-directory: ./showcase
-        run: npm install
+            - name: npm build showcase
+              run: npm run build:sc
 
-      - name: npm build showcase
-        working-directory: ./showcase
-        run: npm run build
+            - name: deploy Showcase to Github Pages
+              if: ${{ github.event_name == 'release' }}
+              uses: JamesIves/[email protected]
+              with:
+                  branch: docs
+                  folder: dist-showcase
+                  single-commit: true
 
-      - name: deploy Showcase to Github Pages
+    publish:
+        needs: build
         if: ${{ github.event_name == 'release' }}
-        uses: JamesIves/[email protected]
-        with:
-          branch: docs
-          folder: showcase/build
-          single-commit: true
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: "19.1.0"
+                  registry-url: "https://registry.npmjs.org"
 
-  publish:
-    needs: build
-    if: ${{ github.event_name == 'release' }}
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: 'library'
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '19.1.0'
-          registry-url: 'https://registry.npmjs.org'
+            - name: Get release version
+              id: release
+              run: |
+                  FULL_VERSION=${{ github.event.release.tag_name }}
+                  SHORT_VERSION=${FULL_VERSION:1}
+                  echo shortVersion=${SHORT_VERSION} >> $GITHUB_OUTPUT
 
-      - name: Get release version
-        id: release
-        run: |
-          FULL_VERSION=${{ github.event.release.tag_name }}
-          SHORT_VERSION=${FULL_VERSION:1}
-          echo shortVersion=${SHORT_VERSION} >> $GITHUB_OUTPUT
+            - name: Update release version
+              run: npm version ${{ steps.release.outputs.shortVersion }}
 
-      - name: Update release version
-        working-directory: ./library
-        run: npm version ${{ steps.release.outputs.shortVersion }}
+            - name: Install dependencies
+              run: npm install
 
-      - name: Install dependencies
-        working-directory: ./library
-        run: npm install
+            - name: Build release
+              run: npm run build:lib
 
-      - name: Build release
-        working-directory: ./library
-        run: npm run build
-
-      - name: Publish to npmjs
-        working-directory: ./library
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}
+            - name: Publish to npmjs
+              run: npm publish --access public
+              env:
+                  NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}

.gitignore

@@ -1,9 +1,12 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+
+
 # dependencies
 /showcase/package-lock.json
 */build
 */dist
+/dist-showcase
 */node_modules
 /.pnp
 .pnp.js
@@ -24,3 +27,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+node_modules
+dist

.prettierrc

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

.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+	"extends": ["stylelint-config-standard"],
+	"plugins": ["stylelint-order"],
+	"rules": {
+		"custom-property-empty-line-before": null,
+		"selector-class-pattern": null,
+		"comment-empty-line-before": null,
+		"comment-whitespace-inside": "always"
+	},
+	"ignoreFiles": "dist/**/*"
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"docwriter.style": "JSDoc"
+}

README.md

@@ -5,13 +5,31 @@ UI-Kit-ts provides several typescript ui components and functionality used throu
 Checkout the online demo of the [showcase](https://linked-planet.github.io/ui-kit-ts/).
 
 ## Structure
-- `library`: library containing all components and functionality
-- `showcase`: showcase which demonstrates all components and their usage
+
+-   `library`: library containing all components and functionality
+-   `showcase`: showcase which demonstrates all components and their usage
 
 ## Usage
 
-Run the following command in `showcase` directory to start the showcase app and open it in your browser:
-```npm run start```
+Run the following command to start the showcase app and open it in your browser:
+`npm run dev:sc`
+
+To build the library use:
+`npm run build:lib`
+
+And the showcase:
+`npm run build:sc`
+
+### Localization
+
+ui-kit-ts offers integration of FormatJS to support localization, although no component is tight to it.
+Use the LocaleProvider in the locale context to automatically fetch translations of defined messages.
+With `npm run messages:extract` defined messages in FormatJS Message components are extracted into the library/localization/translations directory as Json. Create the translated Json using the locale identifier as file name (i.g. extracted is a 'en.json', so we create a 'de.json'). Compilation of the translated messages happens automatically during the build.
+
+When using the LocaleProvider, it will try to download the compiled translations for a set locale from the public/translations-compiled directory. If none is available, it will default back to the default messages.
+
+### Theming
+
+ui-kit-ts supports the Atlassian design system, which is basically a mapping of tokens to css variables. If the used component does not seem to have the proper styling, use the 'initTheming()' function in the theming directory, which sets the themeing attribute in the HTML tag.
 
-make sure to reload all dependency with:
-```npm run reload```
+Do not forget to add the '@linked-planet/ui-kit-ts/style.css' someplace in your project.

custom.d.ts

@@ -0,0 +1,24 @@
+declare module "*.module.css" {
+	const classes: { [key: string]: string };
+	export default classes;
+}
+
+declare module "*.module.scss" {
+	const classes: { [key: string]: string };
+	export default classes;
+}
+
+declare module "*.module.sass" {
+	const classes: { [key: string]: string };
+	export default classes;
+}
+
+declare module "*.module.less" {
+	const classes: { [key: string]: string };
+	export default classes;
+}
+
+declare module "*.module.styl" {
+	const classes: { [key: string]: string };
+	export default classes;
+}

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/ico" href="images/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>UI-KIT-TS Showcase</title>
+	</head>
+	<body>
+		<script type="module" src="./showcase/src/index.tsx"></script>
+		<div id="root"></div>
+	</body>
+</html>