@vention/machine-ui 3.27.0

package/Dockerfile

@@ -0,0 +1,11 @@
+# For this dockerfile to work, we assume that `nx build-storybook machine-ui` was ran before
+FROM node:18.17.1-alpine
+
+WORKDIR /app
+
+COPY dist/storybook/machine-ui ./
+
+RUN npm install -g --ignore-scripts http-server
+
+EXPOSE 3000
+CMD [ "http-server", "./", "-p", "3000" ]

package/README.md

@@ -0,0 +1,39 @@
+# machine-ui
+
+## Documentation
+
+This Library is a collection of reusable components for all Vention teams.
+Detailed documentation can be found [here](https://machine-ui.vention-aws.net/?path=/docs/guides-introduction--documentation).
+
+## Versioning Policy
+
+Starting with version 1.0.0, we are committed to maintaining strict semantic versioning practices:
+
+- **Major versions** (e.g., 1.x.x → 2.x.x) will be reserved for breaking changes to component contracts, APIs, or behavior that could impact consuming applications
+- **Minor versions** (e.g., 1.1.x → 1.2.x) will introduce new features while maintaining backward compatibility
+- **Patch versions** (e.g., 1.1.1 → 1.1.2) will contain bug fixes and internal improvements
+
+Any breaking change, no matter how small, will require a major version bump. This ensures consuming teams can confidently upgrade patch and minor versions without worrying about unexpected breaking changes.
+
+This library was generated with [Nx](https://nx.dev).
+
+Run it with `npm run nx -- run machine-ui:storybook`
+
+## Running unit tests
+
+Run `npm run nx -- test machine-ui` to execute the unit tests via [Jest](https://jestjs.io).
+
+## Accessing the Coverage Report
+
+After running the tests, you can open the coverage report using the following command:
+`npm run nx -- open-coverage machine-ui`
+
+## Generating Icons
+
+1. Run `nx reset`
+2. Add the .svg file to `libs/machine-ui/src/lib/components/vention-icon/svg` (or `libs/machine-ui/src/lib/components/vention-icon/duotone-svg` for a duotone icon)
+3. Run the following command: `npm run nx -- generate-icons machine-ui`
+
+This will optimize the icon, convert it into a React component, and integrate it into the `<VentionIcon>` component.
+The prop type will be fully typed based on the .svg filename (make sure the filename is in kebab-case).
+

package/ecs-task-definition.json

@@ -0,0 +1,28 @@
+{
+  "family": "machine-ui-storybook",
+  "runtimePlatform": { "operatingSystemFamily": "LINUX" },
+  "requiresCompatibilities": ["FARGATE"],
+  "cpu": "512",
+  "memory": "1GB",
+  "networkMode": "awsvpc",
+  "executionRoleArn": "arn:aws:iam::592997525488:role/ecsTaskExecutionRole",
+  "containerDefinitions": [
+    {
+      "name": "machine-ui-storybook",
+      "image": "592997525488.dkr.ecr.us-west-2.amazonaws.com/machine-ui-storybook:latest",
+      "memory": 1024,
+      "cpu": 512,
+      "essential": true,
+      "portMappings": [{ "containerPort": 3000 }],
+      "logConfiguration": {
+        "logDriver": "awslogs",
+        "options": {
+          "awslogs-group": "machine-ui-storybook",
+          "awslogs-region": "us-west-2",
+          "awslogs-stream-prefix": "logs"
+        }
+      },
+      "environment": []
+    }
+  ]
+}

package/eslint.config.js

@@ -0,0 +1,37 @@
+const nx = require("@nx/eslint-plugin")
+const baseConfig = require("../../../eslint.base.config.js")
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs["flat/react"],
+  {
+    files: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+    // Override or add rules here
+    rules: {},
+  },
+  {
+    files: ["**/*.json"],
+    rules: {
+      "@nx/dependency-checks": [
+        "error",
+        {
+          ignoredFiles: [
+            "{projectRoot}/*.config.js",
+            "{projectRoot}/.storybook/**",
+            "{projectRoot}/src/**/*test.tsx",
+            "{projectRoot}/src/**/*.stories.tsx",
+            "{projectRoot}/src/lib/testing/*.tsx",
+          ],
+          /*
+          At the time that this was introduced react-dom was not actually used within the machine-ui project
+          machine-ui/package.json declares react-dom as a peerDependency because it is a requirement to expose @mui/material as a peerDependency
+          */
+          ignoredDependencies: ["react-dom"],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: require("jsonc-eslint-parser"),
+    },
+  },
+]

package/jest.config.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+export default {
+  displayName: "machine-ui",
+  preset: "../../../jest.preset.js",
+  transform: {
+    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "@nx/react/plugins/jest",
+    "^.+\\.jsx$": ["babel-jest", { presets: ["@nx/react/babel"] }],
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: "projects/libs/machine-ui/tsconfig.spec.json",
+        sourceMaps: true,
+      },
+    ],
+  },
+  collectCoverageFrom: [
+    "src/lib/components/**/*.{ts,tsx}",
+    "!src/lib/components/**/index.ts",
+    "!src/**/*.*.{ts,tsx}",
+    "!src/lib/components/vention-icon/generate-icon-types.ts",
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  coverageDirectory: "../../../coverage/projects/libs/machine-ui",
+  testEnvironment: "jsdom",
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@vention/machine-ui",
+  "version": "3.27.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VentionCo/machine-cloud.git"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@tabler/icons-react": "3.35.0",
+    "csstype": "3.1.3",
+    "react-draggable": "4.4.6",
+    "tss-react": "4.9.13"
+  },
+  "peerDependencies": {
+    "@mui/material": "5.16.7",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}

package/project.json

@@ -0,0 +1,164 @@
+{
+  "name": "machine-ui",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "projects/libs/machine-ui/src",
+  "projectType": "library",
+  "tags": ["global"],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "build:types": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/projects/libs/machine-ui"],
+      "options": {
+        "command": "tsc --project projects/libs/machine-ui/tsconfig.types.json"
+      },
+      "dependsOn": [
+        {
+          "target": "build:types",
+          "projects": "dependencies"
+        }
+      ],
+      "cache": true
+    },
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "dependsOn": ["build-storybook"],
+      "options": {
+        "outputPath": "dist/projects/libs/machine-ui",
+        "tsConfig": "projects/libs/machine-ui/tsconfig.lib.json",
+        "project": "projects/libs/machine-ui/package.json",
+        "entryFile": "projects/libs/machine-ui/src/index.ts",
+        "external": ["react", "react-dom", "react/jsx-runtime", "react-router", "react-router-dom"],
+        "skipTypeField": true,
+        "rollupConfig": "@nx/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "projects/libs/machine-ui/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ],
+        "format": ["esm"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "projects/libs/machine-ui/jest.config.ts",
+        "codeCoverage": true
+      }
+    },
+    "open-coverage": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "open coverage/projects/libs/machine-ui/index.html"
+      }
+    },
+    "generate-icons": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "echo 'Generating all icons for <VentionIcon /> ...'",
+          "rm -rf projects/libs/machine-ui/src/lib/components/vention-icon/_generated",
+          "svgo -f projects/libs/machine-ui/src/lib/components/vention-icon/svg --pretty --config=projects/libs/machine-ui/src/lib/components/vention-icon/svgo.config.js",
+          "npx @svgr/cli --config-file projects/libs/machine-ui/src/lib/components/vention-icon/svgr.config.js --out-dir projects/libs/machine-ui/src/lib/components/vention-icon/_generated/icons -- projects/libs/machine-ui/src/lib/components/vention-icon/svg",
+          "npx @svgr/cli --config-file projects/libs/machine-ui/src/lib/components/vention-icon/svgr-duotone.config.js --out-dir projects/libs/machine-ui/src/lib/components/vention-icon/_generated/duotone-icons -- projects/libs/machine-ui/src/lib/components/vention-icon/duotone-svg",
+          "ts-node -P projects/libs/machine-ui/tsconfig.icon-generator.json projects/libs/machine-ui/src/scripts/generate-icon-types.ts --basePath=../lib/components/vention-icon",
+          "echo '✅ Done generating icons.'"
+        ]
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "projects/libs/machine-ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/machine-ui",
+        "configDir": "projects/libs/machine-ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": false
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c projects/libs/machine-ui/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "machine-ui:build-storybook",
+        "staticFilePath": "dist/storybook/machine-ui"
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "machine-ui:build-storybook:ci"
+        }
+      }
+    },
+    "package": {
+      "dependsOn": ["build-storybook"],
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["TAG=${TAG} docker buildx bake machine-ui-storybook"],
+        "cwd": "{workspaceRoot}"
+      }
+    },
+    "publish": {
+      "dependsOn": ["package"],
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["TAG=${TAG} docker buildx bake machine-ui-storybook --push"],
+        "cwd": "{workspaceRoot}"
+      }
+    },
+    "nx-release-publish": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npm pkg set name=@vention/machine-ui --prefix {projectRoot}",
+          "npm pkg delete publishConfig --prefix {projectRoot}",
+          "npm publish {projectRoot} --access=public",
+          "npm pkg set name=@ventionco/machine-ui --prefix {projectRoot}",
+          "npm publish {projectRoot} --access=restricted"
+        ],
+        "parallel": false
+      },
+      "dependsOn": ["build"]
+    },
+    "deploy": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["gh workflow run .github/workflows/deploy-machine-ui-storybook.yml --field VERSION=$VERSION"]
+      }
+    },
+    "upload-codecov": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "codecovcli upload-process --token=$CODECOV_TOKEN --flag=machine-ui --file=coverage/projects/libs/machine-ui/lcov.info"
+        ]
+      }
+    }
+  }
+}

package/src/documentation/code-conventions.mdx

@@ -0,0 +1,98 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Guides/Code Conventions" />
+
+# Code Conventions
+
+Machine UI builds off of the coding standards of the machine-cloud repository, you can view their guidelines [here](https://machine-cloud-documentation.vention-aws.net/docs/coding-guidelines).
+
+## 🏷️ Naming Conventions
+
+We prefix all components with `Vention` to avoid naming conflicts with other libraries. We also use PascalCase for all components and kebab-case for folders and files.
+
+## 🌳 Code Structure
+
+Please abide by the following folder structure when contributing to Machine UI:
+
+```plaintext
+machine-ui
+├── .storybook
+│   └── files relating to the global theme and setup of storybook
+├── src
+│   ├── documentation/Guides
+│   │   └── markdown files for documentation
+|   └── lib
+│       ├── components
+│       │   ├── vention-<component>
+│       │   │   ├── vention-<component>.tsx
+│       │   │   ├── vention-<component>.stories.tsx
+│       │   │   └── vention-<component>.test.tsx
+│       |   └ etc.
+│       ├── testing
+│       │   └── helper functions for writing react tests
+│       └─── theme
+│           └── MUI theme setup
+└── index.ts --> ensure all components are exported from here
+```
+
+We follow the rule of 1 component per `.tsx` file, so if multiple components are required , the component directory should look like:
+
+```plaintext
+├── components
+│       │   ├── vention-<component>
+│       │   │   ├── vention-<component>.tsx
+│       │   │   ├── vention-<component>-other.tsx
+│       │   │   ├── vention-<component>-other-1.tsx
+│       │   │   ├── vention-<component>.stories.tsx
+│       │   │   └── vention-<component>.test.tsx
+│       |   └ etc.
+```
+
+However, be sure to only export 1 component from each directory in `index.ts` at the top level of `machine-ui/src`.
+
+## Compound Components
+
+Sometimes there are components that are dependent on each other to function because they share state and/or logic.
+In these cases we can leverage the [Compound Component pattern](https://www.patterns.dev/react/compound-pattern/) to make this relationship clear.
+
+For example, a `Select` component could be the parent of multiple `Option` components.
+It wouldn't make much sense to use the `Option` on its own as it would likely rely on the state of the Select.
+
+```jsx
+const Option = ({value}) => <li>Option {value}<li/>
+```
+
+```jsx
+const Select = ({ children }) => <ul>{children}</ul>
+
+Select.Option = Option
+
+// Only the Select component needs to be exported
+export { Select }
+```
+
+###### Usage
+
+```jsx
+<Select>
+  <Select.Option value={1} />
+  <Select.Option value={2} />
+  <Select.Option value={3} />
+</Select>
+```
+
+## 🧪 Testing
+
+We require **100% unit test coverage** for all components. We use Jest and React Testing Library for testing. You can run tests with the following command in the root directory:
+
+```bash
+nx run machine-ui:test
+```
+
+To see which part of the code is not covered, you can run:
+
+```bash
+open coverage/projects/libs/machine-ui/index.html
+```
+
+PRs cannot be merged if they do not meet this requirement.

package/src/documentation/design-system/colors.mdx

@@ -0,0 +1,58 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks"
+import { COLORS } from "../../lib/theme/colors"
+
+<Meta title="Guides/Design System/Colors" />
+
+export const colorData = {
+  slate: {
+    title: "Slate Grey",
+    subtitle: "Neutral",
+  },
+  blue: {
+    title: "Blue",
+    subtitle: "Primary",
+  },
+  green: {
+    title: "Green",
+    subtitle: "Sucess",
+  },
+  amber: {
+    title: "Amber",
+    subtitle: "Warning",
+  },
+  red: {
+    title: "Red",
+    subtitle: "Destructive",
+  },
+  cyan: {
+    title: "Cyan",
+    subtitle: "Cyan",
+  },
+}
+
+# Colors
+
+This is a collection of colors used in the Vention Design System. The colors are organized by their usage and are available in the Machine UI theme.
+
+<ColorPalette>
+  <ColorItem title="Vention Blue" subtitle="Official Company Color" colors={{ "main (a.k.a slate-800)": COLORS.slate[800] }} />
+  {Object.entries(COLORS).map(([key, value]) => (
+    <ColorItem key={key} title={colorData[key]?.title || "Untitled"} subtitle={colorData[key]?.subtitle || "Untitled"} colors={value} />
+  ))}
+</ColorPalette>
+
+## Usage
+
+Here is an example of how to use colors to customize components in TSS:
+
+```tsx
+import { COLORS } from "@ventionco/machine-ui"
+import { tss } from "tss-react/mui"
+
+const useStyles = tss.create(({ theme }) => ({
+  root: {
+    color: COLORS.slate[600],
+    backgroundColor: COLORS.amber[200],
+  },
+}))
+```

package/src/documentation/design-system/how-to-choose-color.mdx

@@ -0,0 +1,63 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Guides/Design System/How to choose colors method" />
+
+# Choosing the Right Method for Colors in Your Component
+
+When developing your component, you will have multiple ways to apply colors. This guide will help you make the right choice.
+
+## Semantic Palette
+
+Certain colors are used consistently throughout the application. To ensure large-scale modifications are easy and maintain design consistency, these colors are grouped under specific usage-based names.
+
+The key principle is to create semantic color groups **only when necessary**—too many groups reduce the value of a semantic palette.
+
+Occasionally, cleanup will be required to remove unused semantic colors or introduce new ones. These decisions are made by the designer, and we must follow and implement the updates accordingly.
+
+### Example: Using the Semantic Palette
+
+```tsx
+import { tss } from "tss-react/mui"
+
+const useStyles = tss.create(({ theme }) => ({
+  root: {
+    backgroundColor: theme.palette.background.default,
+  },
+}))
+```
+
+## Color Palette
+
+When a color is used for a specific, isolated use case rather than across the entire design system, it is better to use colors directly from the color palette.
+
+### Example: Using the Color Palette for a Specific Component
+
+```tsx
+import { COLORS } from "@ventionco/machine-ui"
+import { tss } from "tss-react/mui"
+
+const useStyles = tss.create(({ theme }) => ({
+  uniqueContainer: {
+    backgroundColor: COLORS.amber[200],
+  },
+}))
+```
+
+## Component Color Props
+
+When using a component that supports multiple color options, the specific color should be abstracted away from the component's client. Instead of referencing an exact color, use a general color name like "red", "blue", etc.
+
+### Example: Abstracting Component Colors
+
+```tsx
+import { machineUiTheme } from "@ventionco/machine-ui"
+
+export default function MyComponent() {
+  return <VentionBadge color="red" size="medium" text="Badge" variant="filled" />
+}
+```
+
+## What Not to Do
+
+- Avoid creating a "Miscellaneous" category in the Semantic Palette.
+  If a color is used only once, it should come directly from the color palette. A miscellaneous category contradicts the purpose of the Semantic Palette and should be avoided.