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,40 @@
+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"
+
+    - 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,41 @@
+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"
+
+    - 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,30 @@
+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"
+
+    - 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;

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" }),
+    ],
+  },
+];