diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 4ab0733..ab85b64 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -57,8 +57,8 @@ jobs:
with:
node-version: 22.x
cache: npm
- - run: npm install
- run: npm install -g npm@latest
+ - run: npm install
- name: Build
run: npm run build
diff --git a/README.md b/README.md
index 31508b3..4eef33f 100644
--- a/README.md
+++ b/README.md
@@ -71,24 +71,33 @@ Subsequently, you can use it as follows:
This is type-checked, and will throw an error if the corresponding icon doesn't exist.
-## AsciiDoc Components
+## Usage
-This repository includes various
-[`@oxide/react-asciidoc`](https://github.com/oxidecomputer/react-asciidoc) components that
-are reused across multiple internal sites such as docs.oxide.computer, oxide.computer, and
-eventually the rfd.shared.oxide.computer (when its conversion to `react-asciidoc` is
-complete). The associated stylesheet `asciidoc.css` is also included.
+This package provides two main entry points:
-They can be imported and used as follows:
+### UI Components (`@oxide/design-system/ui`)
+
+Basic UI components like Badge, Button, Checkbox, Listbox, Spinner, and Tabs. These are
+lightweight components without dependencies on AsciiDoc processing.
```ts
-import { AsciiDocBlocks } from '@oxide/design-system/components/dist'
+import { Button, Badge } from '@oxide/design-system/ui'
+```
+
+### AsciiDoc Components (`@oxide/design-system/asciidoc`)
+
+[`@oxide/react-asciidoc`](https://github.com/oxidecomputer/react-asciidoc) components for
+rendering AsciiDoc content, reused across docs.oxide.computer, oxide.computer, and
+rfd.shared.oxide.computer. The associated stylesheet `asciidoc.css` is also included.
+
+```ts
+import { AsciiDocBlocks } from '@oxide/design-system/asciidoc'
export const opts: Options = {
overrides: {
admonition: AsciiDocBlocks.Admonition,
table: AsciiDocBlocks.Table,
- listing: AsciiDocBlocks.Listing,
+ section: AsciiDocBlocks.Section,
},
}
```
@@ -97,11 +106,7 @@ export const opts: Options = {
```
-## React Components
-
-The full UI library is housed within the web console repo. The components included in this
-package are those reused across other Oxide sites. When using them, remember to also import
-their associated stylesheets.
+When using these components, remember to also import their associated stylesheets.
Be sure to add the components path to the `tailwind.config.js` to ensure the appropriate
styles are included. For example:
diff --git a/components/src/index.ts b/components/src/index.ts
deleted file mode 100644
index c33e34e..0000000
--- a/components/src/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *
- * Copyright Oxide Computer Company
- */
-
-export * from './asciidoc'
-export * from './ui'
diff --git a/components/src/ui/listbox/Listbox.tsx b/components/src/ui/listbox/Listbox.tsx
index a6d70b8..17eca91 100644
--- a/components/src/ui/listbox/Listbox.tsx
+++ b/components/src/ui/listbox/Listbox.tsx
@@ -10,7 +10,8 @@ import { flip, FloatingPortal, offset, size, useFloating } from '@floating-ui/re
import { Listbox as Select } from '@headlessui/react'
import cn from 'classnames'
import type { ReactNode } from 'react'
-import { SpinnerLoader } from '~/src'
+
+import { SpinnerLoader } from '../'
export type ListboxItem = {
value: Value
diff --git a/components/src/ui/spinner/Spinner.tsx b/components/src/ui/spinner/Spinner.tsx
index e8c4736..1b388d9 100644
--- a/components/src/ui/spinner/Spinner.tsx
+++ b/components/src/ui/spinner/Spinner.tsx
@@ -69,10 +69,12 @@ type Props = {
minTime?: number
}
+type Timeout = ReturnType
+
/** Loading spinner that shows for a minimum of `minTime` */
export const SpinnerLoader = ({ isLoading, children = null, minTime = 500 }: Props) => {
const [isVisible, setIsVisible] = useState(isLoading)
- const hideTimeout = useRef(null)
+ const hideTimeout = useRef(null)
const loadingStartTime = useRef(0)
useEffect(() => {
diff --git a/package-lock.json b/package-lock.json
index b0b7667..7de6639 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,7 +78,6 @@
"resolved": "https://registry.npmjs.org/@asciidoctor/opal-runtime/-/opal-runtime-3.0.1.tgz",
"integrity": "sha512-iW7ACahOG0zZft4A/4CqDcc7JX+fWRNjV5tFAVkNCzwZD+EnFolPaUOPYt8jzadc0+Bgd80cQTtRMQnaaV1kkg==",
"license": "MIT",
- "peer": true,
"dependencies": {
"glob": "8.1.0",
"unxhr": "1.2.0"
@@ -92,7 +91,6 @@
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
"license": "MIT",
- "peer": true,
"dependencies": {
"balanced-match": "^1.0.0"
}
@@ -103,7 +101,6 @@
"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
"deprecated": "Glob versions prior to v9 are no longer supported",
"license": "ISC",
- "peer": true,
"dependencies": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
@@ -123,7 +120,6 @@
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
"license": "ISC",
- "peer": true,
"dependencies": {
"brace-expansion": "^2.0.1"
},
@@ -389,6 +385,7 @@
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
@@ -1600,6 +1597,7 @@
"integrity": "sha512-soa2bPUJAFruLL4z/CnMfSEKGznm5ebz29fIa9PxYtu8HHyLKNE1NXAs6dylfw1jn/ilEIfO2oLLN6uAafb7DA==",
"devOptional": true,
"license": "Apache-2.0",
+ "peer": true,
"dependencies": {
"@babel/generator": "^7.26.2",
"@babel/parser": "^7.26.2",
@@ -1935,6 +1933,7 @@
"integrity": "sha512-7RKRKuA4xTjMhY+eG3jthb3hlZCsOwg3rztWh75Xc+ShDWOfDDATWbeZpAHBNRpm4Tv9WgBMOy1zEJYXG6NJ7Q==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@octokit/auth-token": "^2.4.4",
"@octokit/graphql": "^4.5.8",
@@ -3356,6 +3355,7 @@
"integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@babel/core": "^7.21.3",
"@svgr/babel-preset": "8.1.0",
@@ -3569,6 +3569,7 @@
"integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"undici-types": "~7.12.0"
}
@@ -3593,6 +3594,7 @@
"integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
"devOptional": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
@@ -3604,6 +3606,7 @@
"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
"devOptional": true,
"license": "MIT",
+ "peer": true,
"peerDependencies": {
"@types/react": "^18.0.0"
}
@@ -4095,6 +4098,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
+ "peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -4500,6 +4504,7 @@
}
],
"license": "MIT",
+ "peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.3",
"caniuse-lite": "^1.0.30001741",
@@ -5280,6 +5285,7 @@
"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"import-fresh": "^3.3.0",
"js-yaml": "^4.1.0",
@@ -5949,6 +5955,7 @@
"dev": true,
"hasInstallScript": true,
"license": "MIT",
+ "peer": true,
"bin": {
"esbuild": "bin/esbuild"
},
@@ -6013,6 +6020,7 @@
"integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.1",
@@ -6074,6 +6082,7 @@
"integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
"dev": true,
"license": "MIT",
+ "peer": true,
"bin": {
"eslint-config-prettier": "bin/cli.js"
},
@@ -6531,7 +6540,8 @@
"resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.16.11.tgz",
"integrity": "sha512-LaI+KaX2NFkfn1ZGHoKCmcfv7yrZsC3b8NtWsTVQeHkq4F27vI5igUuO53sxqDEa2gNQMHFPmpojDw/1zmUK7w==",
"dev": true,
- "license": "MIT"
+ "license": "MIT",
+ "peer": true
},
"node_modules/fromentries": {
"version": "1.3.2",
@@ -7129,7 +7139,6 @@
"resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.1.1.tgz",
"integrity": "sha512-+o4Y4Z0CLuyemeccvGN4bAO20aauB2N9tFEAep5x4OW34kV4PTarBHm6RL02afYt2BMKcr0D2Agep8S3nJPIBg==",
"license": "MIT",
- "peer": true,
"dependencies": {
"domhandler": "5.0.3",
"htmlparser2": "10.0.0"
@@ -7140,7 +7149,6 @@
"resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.2.6.tgz",
"integrity": "sha512-qcpPWLaSvqXi+TndiHbCa+z8qt0tVzjMwFGFBAa41ggC+ZA5BHaMIeMJla9g3VSp4SmiZb9qyQbmbpHYpIfPOg==",
"license": "MIT",
- "peer": true,
"dependencies": {
"domhandler": "5.0.3",
"html-dom-parser": "5.1.1",
@@ -7179,7 +7187,6 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3",
@@ -7192,7 +7199,6 @@
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
"license": "BSD-2-Clause",
- "peer": true,
"engines": {
"node": ">=0.12"
},
@@ -7356,8 +7362,7 @@
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
"integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/internal-slot": {
"version": "1.1.0",
@@ -9649,6 +9654,7 @@
}
],
"license": "MIT",
+ "peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -9716,6 +9722,7 @@
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
"license": "MIT",
+ "peer": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
@@ -9974,8 +9981,7 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
"integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==",
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/read-pkg": {
"version": "3.0.0",
@@ -10454,8 +10460,7 @@
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/semver": {
"version": "6.3.1",
@@ -11222,7 +11227,6 @@
"resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz",
"integrity": "sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==",
"license": "MIT",
- "peer": true,
"dependencies": {
"style-to-object": "1.0.9"
}
@@ -11232,7 +11236,6 @@
"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.9.tgz",
"integrity": "sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==",
"license": "MIT",
- "peer": true,
"dependencies": {
"inline-style-parser": "0.2.4"
}
@@ -11854,6 +11857,7 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
"license": "MIT",
+ "peer": true,
"engines": {
"node": ">=12"
},
@@ -12061,7 +12065,8 @@
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
- "license": "0BSD"
+ "license": "0BSD",
+ "peer": true
},
"node_modules/tsup": {
"version": "8.5.0",
@@ -12175,6 +12180,7 @@
"integrity": "sha512-+wKjMNU9w/EaQayHXb7WA7ZaHY6hN8WgfvHNQ3t1PnU91/7O8TcTnIhCDYTZwnt8JsO9IBqZ30Ln1r7pPF52Aw==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"esbuild": "~0.25.0",
"get-tsconfig": "^4.7.5"
@@ -12299,6 +12305,7 @@
"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
"dev": true,
"license": "Apache-2.0",
+ "peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -12447,7 +12454,6 @@
"resolved": "https://registry.npmjs.org/unxhr/-/unxhr-1.2.0.tgz",
"integrity": "sha512-6cGpm8NFXPD9QbSNx0cD2giy7teZ6xOkCUH3U89WKVkL9N9rBrWjlCwhR94Re18ZlAop4MOc3WU1M3Hv/bgpIw==",
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=8.11"
}
@@ -12634,6 +12640,7 @@
"integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",
@@ -12770,6 +12777,7 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
"license": "MIT",
+ "peer": true,
"engines": {
"node": ">=12"
},
diff --git a/package.json b/package.json
index d032289..61e633e 100644
--- a/package.json
+++ b/package.json
@@ -4,20 +4,13 @@
"description": "Home of reusable design assets and token for oxide internal sites",
"type": "module",
"sideEffects": false,
- "typings": "./dist/components/index.d.ts",
- "module": "./dist/components/index.js",
"exports": {
"./styles/*": "./styles/dist/*",
"./components/*.css": "./dist/*.css",
- "./components": "./dist/components/src/index.js",
+ "./asciidoc": "./dist/components/src/asciidoc/index.js",
+ "./ui": "./dist/components/src/ui/index.js",
"./icons": "./dist/icons/index.js",
- "./icons/react": "./dist/icons/react/index.js",
- ".": {
- "import": {
- "types": "./dist/components/src/index.d.ts",
- "default": "./dist/components/src/index.js"
- }
- }
+ "./icons/react": "./dist/icons/react/index.js"
},
"scripts": {
"export-icons": "npx zx ./scripts/export-icons.md && npm run fmt",
diff --git a/tsup.config.ts b/tsup.config.ts
index 465b0ce..9316758 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -9,7 +9,12 @@ import { defineConfig } from 'tsup'
export default defineConfig({
publicDir: 'components/src/assets/',
- entry: ['components/src/index.ts', 'icons/index.ts', 'icons/react/index.ts'],
+ entry: [
+ 'components/src/asciidoc/index.tsx',
+ 'components/src/ui/index.ts',
+ 'icons/index.ts',
+ 'icons/react/index.ts',
+ ],
sourcemap: true,
clean: true,
format: ['esm'],