@camtomlabs/malix-design-system 0.1.7 → 0.3.0

package/eslint-plugin.cjs

@@ -0,0 +1,128 @@
+/**
+ * @camtomlabs/malix-design-system/eslint-plugin
+ *
+ * Custom ESLint rules that enforce usage of canonical Malix components
+ * instead of raw HTML elements.
+ *
+ * Usage in consuming repo:
+ *
+ *   // .eslintrc.cjs
+ *   module.exports = {
+ *     plugins: ['@camtomlabs/malix'],
+ *     rules: {
+ *       '@camtomlabs/malix/no-raw-button': 'warn',
+ *       '@camtomlabs/malix/no-raw-input': 'warn',
+ *     },
+ *   };
+ *
+ * Both rules allow an escape hatch via the disable comment:
+ *   // eslint-disable-next-line @camtomlabs/malix/no-raw-button
+ *   <button type="submit" form="external-form-id" />
+ */
+
+'use strict';
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noRawButton = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow raw <button> elements. Use <Button> from @camtomlabs/malix-design-system instead.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: { type: 'string' },
+            description: 'JSX element names that are allowed (e.g. ["Button", "MenuButton"])',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      rawButton:
+        'Do not use raw <button>. Import Button from "@camtomlabs/malix-design-system" and use <Button hierarchy="primary">.',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier') return;
+        if (node.name.name !== 'button') return;
+        context.report({ node, messageId: 'rawButton' });
+      },
+    };
+  },
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noRawInput = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow raw <input> elements (except type="hidden"). Use <Input> from @camtomlabs/malix-design-system instead.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowTypes: {
+            type: 'array',
+            items: { type: 'string' },
+            default: ['hidden', 'file'],
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      rawInput:
+        'Do not use raw <input>. Import Input from "@camtomlabs/malix-design-system" and use <Input>.',
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {};
+    const allowTypes = options.allowTypes || ['hidden', 'file'];
+
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier') return;
+        if (node.name.name !== 'input') return;
+
+        // Allow inputs whose type attribute is in allowTypes (e.g. hidden, file)
+        const typeAttr = node.attributes.find(
+          (attr) =>
+            attr.type === 'JSXAttribute' &&
+            attr.name &&
+            attr.name.name === 'type' &&
+            attr.value &&
+            attr.value.type === 'Literal',
+        );
+        if (typeAttr && allowTypes.includes(typeAttr.value.value)) return;
+
+        context.report({ node, messageId: 'rawInput' });
+      },
+    };
+  },
+};
+
+module.exports = {
+  rules: {
+    'no-raw-button': noRawButton,
+    'no-raw-input': noRawInput,
+  },
+  configs: {
+    recommended: {
+      plugins: ['@camtomlabs/malix'],
+      rules: {
+        '@camtomlabs/malix/no-raw-button': 'warn',
+        '@camtomlabs/malix/no-raw-input': 'warn',
+      },
+    },
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camtomlabs/malix-design-system",
-  "version": "0.1.7",
+  "version": "0.3.0",
   "description": "Malix Design System combined package with components, tokens, and bundled styles.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,13 +8,18 @@
   "types": "./dist/index.d.ts",
   "sideEffects": [
     "./src/styles.css",
-    "./src/tokens.css"
+    "./src/tokens.css",
+    "./src/reset.css"
   ],
   "files": [
     "dist",
     "src/styles.css",
     "src/tokens.css",
-    "src/tokens.registry.json"
+    "src/reset.css",
+    "src/tokens.registry.json",
+    "tailwind.preset.js",
+    "stylelint.config.cjs",
+    "eslint-plugin.cjs"
   ],
   "repository": {
     "type": "git",
@@ -39,9 +44,14 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./css": "./src/styles.css",
     "./styles.css": "./src/styles.css",
     "./tokens.css": "./src/tokens.css",
-    "./tokens.registry.json": "./src/tokens.registry.json"
+    "./reset.css": "./src/reset.css",
+    "./tokens.registry.json": "./src/tokens.registry.json",
+    "./tailwind.preset": "./tailwind.preset.js",
+    "./stylelint.config": "./stylelint.config.cjs",
+    "./eslint-plugin": "./eslint-plugin.cjs"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -50,13 +60,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "tsup": "^8.5.1"
-  },
   "scripts": {
     "build": "tsup",
     "lint": "eslint src"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.6.2"
   }
-}
+}

package/src/reset.css

@@ -0,0 +1,212 @@
+/* ═══════════════════════════════════════════════
+   MALIX RESET — Opt-in CSS reset scoped to @layer
+
+   Ships inside the `malix-reset` layer so any style
+   defined outside this layer (or in a later layer)
+   will win regardless of selector specificity.
+
+   Usage:
+     import '@camtomlabs/malix-design-system/reset.css';
+
+   This file defines the cascade order. Import it
+   ONCE, before any other Malix stylesheet:
+
+     1. malix-reset      (this file)
+     2. malix-tokens     (CSS custom properties)
+     3. malix-components (component styles)
+     4. app              (your own styles)
+
+   Any CSS you write outside these layers will
+   automatically beat the reset — no :not() hacks,
+   no specificity wars.
+   ═══════════════════════════════════════════════ */
+
+@layer malix-reset, malix-tokens, malix-components, app;
+
+@layer malix-reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    tab-size: 4;
+  }
+
+  body {
+    margin: 0;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: var(--malix-font-body, system-ui, sans-serif);
+    color: var(--malix-foreground, #111827);
+    background-color: var(--malix-background-main, #ffffff);
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+  }
+
+  p, blockquote, dl, dd {
+    margin: 0;
+  }
+
+  ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub { bottom: -0.25em; }
+  sup { top: -0.5em; }
+
+  table {
+    border-collapse: collapse;
+    border-color: inherit;
+    text-indent: 0;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  /* IMPORTANT: intentionally NOT resetting button background-color.
+     Components or CSS Modules must be able to set their own background
+     without fighting a global reset. */
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+    border: 0;
+    cursor: pointer;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  legend {
+    padding: 0;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1;
+    color: var(--malix-placeholder, #9ca3af);
+  }
+
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  :disabled {
+    cursor: default;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+}