feat: initial work in rendering a fit

.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintrc.js

@@ -0,0 +1,43 @@
+const path = require("path")
+
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    "airbnb-typescript",
+    "airbnb/hooks",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react/recommended",
+    "plugin:storybook/recommended",
+    "prettier",
+  ],
+  plugins: [
+    "@typescript-eslint",
+    "import",
+    "prettier",
+    "react",
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  rules: {
+    "newline-per-chained-call": "off",
+    "react/jsx-pascal-case": "off",
+    "react/require-default-props": "off",
+  },
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+  ignorePatterns: [
+    "src/EveDataProvider/esf_pb2.js",
+    "src/EveDataProvider/protobuf.js",
+  ],
+  overrides: [],
+}

.github/workflows/publish.yml

@@ -0,0 +1,42 @@
+name: Release
+
+on:
+  release:
+    types:
+    - published
+  pull_request_target:
+    branches:
+    - main
+
+jobs:
+  storybook:
+    name: Publish storybook
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Install NodeJS
+      uses: actions/setup-node@v3
+      with:
+        registry-url: https://npm.pkg.github.com
+        scope: "@eveshipfit"
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Build storybook
+      run: npm run build-storybook
+
+    - name: Publish to Cloudflare Pages
+      uses: cloudflare/pages-action@v1
+      id: pages
+      with:
+        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+        projectName: ${{ vars.CLOUDFLARE_PROJECT_NAME }}
+        directory: storybook-static
+        branch: ${{ github.event_name == 'push' && github.ref_name || github.event_name == 'repository_dispatch' && 'main' || format('pr/{0}', github.event.pull_request.number) }}

.github/workflows/release.yml

@@ -0,0 +1,43 @@
+name: Release
+
+on:
+  release:
+    types:
+    - published
+
+jobs:
+  registries:
+    name: Publish to GitHub NPM
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Install NodeJS
+      uses: actions/setup-node@v3
+      with:
+        registry-url: https://npm.pkg.github.com
+        scope: "@eveshipfit"
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Set version
+      run: |
+        # Remove the "v" from the version.
+        VERSION=$(echo ${{ github.ref_name }} | cut -b2-)
+        echo "Version: ${VERSION}"
+
+        sed -i 's/version = "0.0.0-git"/version = "'${VERSION}'"/' package.json
+
+    - name: Create NPM package
+      run: npm run build
+
+    - uses: JS-DevTools/npm-publish@v3
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        registry: "https://npm.pkg.github.com"
+        package: package.json

.github/workflows/testing.yml

@@ -0,0 +1,32 @@
+name: Testing
+
+on:
+  push:
+    branches:
+    - main
+  pull_request:
+    branches:
+    - main
+
+jobs:
+  testing:
+    name: Testing
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Install NodeJS
+      uses: actions/setup-node@v3
+      with:
+        registry-url: https://npm.pkg.github.com
+        scope: "@eveshipfit"
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run linter
+      run: npm run lint

.gitignore

@@ -0,0 +1,5 @@
+/dist/
+/node_modules/
+/package-lock.json
+/storybook-static/
+/.eslintcache

.npmrc

@@ -0,0 +1 @@
+@eveshipfit:registry=https://npm.pkg.github.com

.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  webpackFinal: async (config: any) => {
+    return {
+      ...config,
+      experiments: {
+        asyncWebAssembly: true
+      }
+    }
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2023 TrueBrain
+
+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.

README.md

@@ -0,0 +1,17 @@
+# React Component library for EVEShip.fit
+
+This repository contains all the components used to build [EVEShip.fit](https://eveship.fit).
+
+## Components
+
+Via [Storybook](https://react.eveship.fit) you can view all the components, their description, and how to use them.
+
+## Embedding in your own application
+
+This library can (freely) be used to visualize an EVE Fit in your own (React) application, by using the components you like most.
+
+Important to note is that by default the data-files are downloaded from `https://data.eveship.fit/`.
+But this URL is protected by a CORS, to avoid unrealistic cost on our side.
+
+If you use this library yourself, you would have to host these files yourself too.
+You can define the URL they are hosted on in the `EveDataProvider` via `dataUrl`.

package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@eveshipfit/react",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/EVEShipFit"
+  },
+  "version": "0.0.0-git",
+  "description": "React component library to quickly and easily show EVE Online ship fits in your own application",
+  "scripts": {
+    "build": "rollup -c",
+    "build-storybook": "storybook build",
+    "dev": "storybook dev -p 6006 --no-open",
+    "lint": "eslint src --ext .js,.tsx --cache"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EVEShipFit/react.git"
+  },
+  "author": "Patric Stout <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "@eveshipfit/dogma-engine": "^1.1.0",
+    "clsx": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.37",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.4.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-esbuild": "^6.1.0",
+    "rollup-plugin-node-externals": "^6.1.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^7.5.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "typescript-plugin-css-modules": "^5.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts"
+}

rollup.config.mjs

@@ -0,0 +1,45 @@
+import commonjs from "@rollup/plugin-commonjs";
+import dts from "rollup-plugin-dts";
+import esbuild from "rollup-plugin-esbuild";
+import nodeExternals from "rollup-plugin-node-externals";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import postcss from "rollup-plugin-postcss";
+import terser from "@rollup/plugin-terser";
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/cjs/index.js",
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: "dist/esm/index.js",
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      nodeExternals(),
+      nodeResolve(),
+      commonjs(),
+      esbuild({ tsconfig: "./tsconfig.json" }),
+      postcss({ modules: true }),
+      terser(),
+    ],
+  },
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/index.d.ts",
+        format: "esm",
+      },
+    ],
+    plugins: [
+      dts({ tsconfig: "./tsconfig.json" }),
+    ],
+  },
+];