@vention/machine-ui 3.27.0

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.storybook/blocks/work-in-progress.tsx

@@ -0,0 +1,12 @@
+import { Box, Typography } from "@mui/material"
+import React from "react"
+
+interface WorkInProgressStoryProps {
+  variantTitle: string
+}
+
+export const WorkInProgressStory = (props: WorkInProgressStoryProps) => (
+  <Box sx={{ bgcolor: "background.subtleDestructive", borderRadius: 3, padding: 3 }}>
+    <Typography>{`${props.variantTitle} variant is still a work in progress. Cannot be used in production.`}</Typography>
+  </Box>
+)

package/.storybook/helpers/go-to-icon-gallery.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { hrefTo } from "@storybook/addon-links"
+
+type Props = {
+  type: "regular" | "duotone"
+}
+
+export const GoToIconGallery = ({ type }: Props) => {
+  const style = { textDecoration: "none", cursor: "pointer", height: "30px" }
+
+  const handleClick = async () => {
+    const storyTitle = type === "duotone" ? "Components/VentionIconDuotone" : "Components/VentionIcon"
+
+    const url = await hrefTo(storyTitle, "Grid View")
+    window.open(url, "_blank")
+  }
+
+  return (
+    <button style={style} onClick={handleClick}>
+      {type === "duotone" ? "Go to Duotone Icon Gallery" : "Go to Icon Gallery"}
+    </button>
+  )
+}

package/.storybook/main.ts

@@ -0,0 +1,38 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+
+const config: StorybookConfig = {
+  stories: ["../src/documentation/**/*.mdx", "../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
+
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@nx/react/plugins/storybook",
+    "@storybook/manager-api",
+    "@storybook/theming",
+    "@storybook/addon-links",
+  ],
+
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+
+  docs: {
+    defaultName: "Documentation",
+  },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+  viteFinal: async config => {
+    // Add emotion to the dedupe list for material-ui css rendering
+    config.resolve = {
+      ...(config.resolve || {}),
+      dedupe: Array.from(new Set([...(config.resolve?.dedupe || []), "@emotion/react", "@emotion/styled"])),
+    }
+
+    return config
+  },
+}
+
+export default config

package/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from "@storybook/manager-api"
+
+import { default as storybookTheme } from "./theme"
+
+addons.setConfig({
+  theme: storybookTheme,
+})

package/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link rel="icon" type="image/png" href="https://seeklogo.com/images/V/vention-logo-0AD1DDFC97-seeklogo.com.png" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto+Mono&display=swap" rel="stylesheet" />

package/.storybook/preview.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { ThemeProvider } from "@mui/material"
+import { Preview } from "@storybook/react"
+import { machineUiTheme, machineUiHmiTheme } from "../src/lib/theme/machine-ui-theme"
+
+import "../src/global-styles.css"
+
+// Define Storybook globalTypes to switch between different ThemeProviders
+export const globalTypes = {
+  themeProvider: {
+    name: "Theme Provider",
+    description: "Choose a Theme Provider",
+    defaultValue: "mui",
+    toolbar: {
+      icon: "paintbrush",
+      items: [
+        { value: "cad", title: "Cad Theme" },
+        { value: "hmi", title: "HMI Theme (pendant)" },
+      ],
+      showName: true,
+    },
+  },
+}
+
+// Theme decorator
+const withThemeProvider = (Story, context) => {
+  const { themeProvider } = context.globals
+
+  return (
+    <ThemeProvider theme={themeProvider === "cad" ? machineUiTheme : machineUiHmiTheme}>
+      <Story />
+    </ThemeProvider>
+  )
+}
+
+const preview: Preview = {
+  decorators: [withThemeProvider],
+
+  parameters: {
+    options: {
+      storySort: {
+        order: [
+          "Guides",
+          ["Introduction", "Getting Started", "Code Conventions", "Installation and Usage", "Design System"],
+          "Components",
+          "In Development",
+        ],
+      },
+    },
+  },
+
+  tags: ["autodocs"],
+}
+
+export default preview

package/.storybook/theme.ts

@@ -0,0 +1,25 @@
+import { create } from "@storybook/theming/create"
+
+import { COLORS } from "../src/lib/theme/colors"
+
+export default create({
+  base: "light",
+  brandTitle: "Machine UI",
+  brandUrl: "https://vention.io/?home",
+  brandImage: "https://mma.prnewswire.com/media/1905755/Vention_Vention_named_as_one_of_Canada_s_Top_Growing_Companies.jpg",
+  brandTarget: "_blank",
+  // Typography
+  fontBase: "Inter, sans-serif",
+  fontCode: "monospace",
+  // Toolbar default and active colors
+  barTextColor: COLORS.slate[900],
+  barSelectedColor: COLORS.blue[500],
+  barHoverColor: COLORS.blue[500],
+  barBg: COLORS.slate[50],
+  // UI
+  appBg: COLORS.slate[100],
+  appContentBg: COLORS.slate[50],
+  appPreviewBg: COLORS.slate[50],
+  appBorderColor: COLORS.slate[200],
+  appBorderRadius: 4,
+})