Release / npm / repo hardening

.github/workflows/release.yml

@@ -1,46 +1,81 @@
 name: Release
 
-on: [push]
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+# Enabled permissions on GITHUB_TOKEN
+permissions:
+  # To be able to push to the repo
+  contents: write
+  # To update the pr description with canary info
+  pull-requests: write
+  # For pr-check to create a status
+  statuses: write
+  # Needed to create PR statuses/checks
+  checks: write
+  # To post comments on PRs
+  issues: write
+  # For trusted publishing
+  id-token: write
 
 jobs:
-  release:
+  validate-labels:
     runs-on: ubuntu-latest
     if:
       "!contains(github.event.head_commit.message, 'ci skip') &&
       !contains(github.event.head_commit.message, 'skip ci')"
-    permissions:
-      pull-requests: write
-      contents: write
     steps:
       - uses: actions/checkout@v5
       - run: git fetch --unshallow --tags
-
-      - name: Use Node.js 22.x
-        uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version: 22.x
           cache: npm
+      - run: npm install
+      - name: Verify Release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run:
+          npx auto pr-check
+          --url=https://github.com/$GITHUB_REPOSITORY/actions/runs/$GITHUB_RUN_ID
 
-      - name: Install dependencies
-        run: npm install
+  release:
+    runs-on: ubuntu-latest
+    environment: production
+    if: |
+      !contains(github.event.head_commit.message, 'ci skip') &&
+      !contains(github.event.head_commit.message, 'skip ci')
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          ref: ${{ github.head_ref || github.ref_name }}
+      - run: git fetch --unshallow --tags
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 22.x
+          cache: npm
+      - run: npm install
+      - run: npm install -g npm@latest
 
       - name: Build
         run: npm run build
 
-      - name: Commit theme changes if needed
+      - name: Check theme changes
         run: |
           git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"
           git add ./styles/dist
           if ! git diff --staged --quiet; then
-            git commit -m "Update themes from token file [ci skip]"
+            git commit -m "Update themes from token file"
             git push
           else
-            echo "No changes to commit"
+            echo "No theme changes detected. Continuing with release."
           fi
 
       - name: Create Release
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: npm run release
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierignore

@@ -1 +1,3 @@
-CHANGELOG.md
+**/*.json
+*.md
+*.css

.prettierrc

@@ -4,8 +4,6 @@
   "semi": false,
   "singleQuote": true,
   "trailingComma": "all",
-  "plugins": ["./node_modules/@trivago/prettier-plugin-sort-imports"],
-  "importOrder": ["^~/(.*)$", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
+  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  "importOrder": ["^~/(.*)$", "", "^[./]"]
 }

README.md

@@ -24,10 +24,7 @@ For more information checkout [auto's docs](https://intuit.github.io/auto/docs).
 
 To ensure consistency between our designs and implementation we use the
 [Design Tokens Plugin](https://www.figma.com/community/plugin/888356646278934516/Design-Tokens)
-inside of figma to export a [json tokens file](styles/src/tokens.json) to the repo. When
-that file is changed the [build-themes](.github/workflows/build-themes.yaml) workflow runs
-to generate theme stylesheets, a tailwind token file, and other artifacts in
-[dist](styles/dist/).
+inside of figma to export a [json tokens file](styles/src/tokens.json) to the repo. The user can then run `npm run build` to generate theme files. This is not automatic, the user should then commit the changes.
 
 The design tokens plugin is two way so token changes made in the json file can be synced
 back with figma.
@@ -46,7 +43,6 @@ icon component as shown below:
 
 ```tsx
 import { type Icon as IconType } from '@oxide/design-system/icons'
-
 // Cannot be imported through '@oxide/design-system'
 import sprite from '../../node_modules/@oxide/design-system/icons/sprite.svg'
 

components/src/asciidoc/Admonition.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { type AdmonitionBlock, Content, Title, parse } from '@oxide/react-asciidoc'
+import { Content, parse, Title, type AdmonitionBlock } from '@oxide/react-asciidoc'
 
 import { titleCase } from '../utils'
 

components/src/asciidoc/Section.tsx

@@ -6,9 +6,9 @@
  * Copyright Oxide Computer Company
  */
 import { Link16Icon } from '@/icons/react'
-import { Content, type SectionBlock, parse } from '@oxide/react-asciidoc'
+import { Content, parse, type SectionBlock } from '@oxide/react-asciidoc'
 import cn from 'classnames'
-import { type JSX, createElement } from 'react'
+import { createElement, type JSX } from 'react'
 
 // We need to remove anchors from the section title (and table of contents) because having
 // an anchor within an anchor causes a client/server render mismatch
@@ -26,7 +26,7 @@ const Section = ({ node }: { node: SectionBlock }) => {
       <span className="anchor" id={node.id || ''} aria-hidden="true" />
       <a className="link group" href={`#${node.id}`}>
         {parse(stripAnchors(node.title))}
-        <Link16Icon className="ml-2 hidden text-accent-secondary group-hover:inline-block" />
+        <Link16Icon className="text-accent-secondary ml-2 hidden group-hover:inline-block" />
       </a>
     </>
   )

components/src/asciidoc/TableOfContents.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { DirectionRightIcon } from '@/icons/react'
-import { type DocumentSection, parse } from '@oxide/react-asciidoc'
+import { parse, type DocumentSection } from '@oxide/react-asciidoc'
 import * as Accordion from '@radix-ui/react-accordion'
 import cn from 'classnames'
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -271,7 +271,7 @@ export const DesktopOutline = ({
       <Fragment key={item.id}>
         <li
           data-level={item.level}
-          className={cn('mb-0 list-none text-sans-sm', item.level > 2 && 'hidden')}
+          className={cn('text-sans-sm mb-0 list-none', item.level > 2 && 'hidden')}
         >
           <a
             href={`#${item.id}`}
@@ -315,7 +315,7 @@ export const SmallScreenOutline = ({
       <Fragment key={item.id}>
         <li
           data-level={item.level}
-          className={cn('list-none text-sans-sm', item.level > 2 && 'hidden')}
+          className={cn('text-sans-sm list-none', item.level > 2 && 'hidden')}
         >
           <a
             href={`#${item.id}`}
@@ -343,7 +343,7 @@ export const SmallScreenOutline = ({
       <Accordion.Root
         type="single"
         className={cn(
-          'toc sticky top-[calc(var(--header-height)-1px)] z-10 -mt-px mb-10 block w-full border-b border-t bg-default border-secondary print:hidden',
+          'toc bg-default border-secondary sticky top-[calc(var(--header-height)-1px)] z-10 -mt-px mb-10 block w-full border-b border-t print:hidden',
           className,
         )}
         collapsible
@@ -352,13 +352,13 @@ export const SmallScreenOutline = ({
       >
         <Accordion.Item value="toc">
           <Accordion.Header>
-            <Accordion.Trigger className="flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-(--container-px) [&>svg]:data-[state=open]:rotate-90">
+            <Accordion.Trigger className="text-sans-md text-default hover:bg-hover px-(--container-px) flex h-12 w-full items-center justify-between [&>svg]:data-[state=open]:rotate-90">
               Table of Contents{' '}
-              <DirectionRightIcon className="transition-all text-tertiary" />
+              <DirectionRightIcon className="text-tertiary transition-all" />
             </Accordion.Trigger>
           </Accordion.Header>
 
-          <Accordion.Content className="animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-(--container-px)">
+          <Accordion.Content className="animated-accordion hydrated border-secondary px-(--container-px) max-h-[60vh] w-full overflow-y-scroll border-t">
             <div className="py-4">{renderToc(toc)}</div>
           </Accordion.Content>
         </Accordion.Item>

components/src/asciidoc/use-delegated-links.ts

@@ -34,7 +34,7 @@ function useDelegatedReactRouterLinks(
   // this is to avoid a dependency on remix/react router
   /** Pass in the result of `useNavigate()` in the calling application. */
   navigate: (to: To) => void,
-  nodeRef: React.RefObject<HTMLElement>,
+  nodeRef: React.RefObject<HTMLElement | null>,
   key: string,
 ) {
   useEffect(() => {

components/src/asciidoc/util.ts

@@ -19,12 +19,12 @@ import {
   processDocument,
 } from '@oxide/react-asciidoc'
 import {
+  bundledLanguages,
+  createHighlighter,
   type BundledLanguage,
   type BundledTheme,
   type HighlighterGeneric,
   type LanguageInput,
-  bundledLanguages,
-  getHighlighter,
 } from 'shiki'
 
 import oxqlLang from './langs/oxql.tmLanguage.json'
@@ -42,7 +42,7 @@ async function getOrCreateHighlighter() {
       ...oxqlLang,
     })
 
-    highlighter = await getHighlighter({
+    highlighter = await createHighlighter({
       themes: [theme],
       langs: langs,
     })

components/src/assets/button.css

@@ -41,14 +41,14 @@ label {
   }
 
   &.btn-ghost {
-    @apply text-secondary hover:bg-hover disabled:bg-transparent disabled:text-disabled;
+    @apply text-secondary hover:bg-hover disabled:text-disabled disabled:bg-transparent;
   }
   &.btn-ghost:after {
     @apply text-neutral-300 opacity-100;
   }
 
   &.btn-accent-ghost {
-    @apply border text-accent border-accent-secondary hover:bg-accent-secondary-hover;
+    @apply text-accent border-accent-secondary hover:bg-accent-secondary-hover border;
   }
 
   &.btn-accent-ghost:after {

components/src/assets/tabs.css

@@ -19,21 +19,20 @@
 }
 
 .ox-tabs-list:after {
-  @apply block w-full border-b border-secondary;
+  @apply border-secondary block w-full border-b;
   content: ' ';
 }
 .ox-tabs.full-width .ox-tabs-list:before {
-  @apply block w-10 min-w-max flex-shrink-0 border-b border-secondary;
+  @apply border-secondary block w-10 min-w-max flex-shrink-0 border-b;
   content: ' ';
 }
 
 .ox-tabs-panel:focus-visible {
-  @apply outline outline-2 outline-offset-[1rem] outline-accent-secondary;
+  @apply outline-accent-secondary outline outline-2 outline-offset-[1rem];
 }
 
 .ox-tab {
-  @apply h-10 space-x-2 whitespace-nowrap border-b px-1.5 pb-1 pt-2
-	uppercase !no-underline text-mono-sm text-tertiary border-secondary;
+  @apply text-mono-sm text-tertiary border-secondary h-10 space-x-2 whitespace-nowrap border-b px-1.5 pb-1 pt-2 uppercase !no-underline;
 }
 
 .ox-tab[data-state='active'],

components/src/ui/badge/Badge.tsx

@@ -53,7 +53,7 @@ export const Badge = ({
       className={cn(
         'ox-badge ring ring-inset',
         `variant-${variant}`,
-        'inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm',
+        'text-mono-sm inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase',
         badgeColors[variant][color],
         className,
       )}

components/src/ui/checkbox/Checkbox.tsx

@@ -11,7 +11,7 @@ import cn from 'classnames'
 import { classed } from '../../utils'
 
 const Check = () => (
-  <Checkmark12Icon className="pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current text-accent" />
+  <Checkmark12Icon className="text-accent pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current" />
 )
 
 const Indeterminate = classed.div`absolute w-2 h-0.5 left-1 top-[7px] bg-accent pointer-events-none`
@@ -57,6 +57,6 @@ export const Checkbox = ({
       {indeterminate && <Indeterminate />}
     </span>
 
-    {children && <span className="ml-2.5 text-sans-md text-secondary">{children}</span>}
+    {children && <span className="text-sans-md text-secondary ml-2.5">{children}</span>}
   </label>
 )