Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/ui-components/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# Node.js UI Components

This package is comprised of UI components for use in the Node.js website, documentation,
and other aspects of the project.

The components are based on [this design file](https://www.figma.com/design/a10cjjw3MzvRQMPT9FP3xz/Node.js).

Most components in this package are available on [Chromatic](https://www.chromatic.com/library?appId=64c7d71358830e9105808652).

For additional details regarding specific components, refer to the [nodejs/nodejs.org](https://github.com/nodejs/nodejs.org) repository.
2 changes: 1 addition & 1 deletion packages/ui-components/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@node-core/ui-components",
"version": "1.3.0",
"version": "1.4.0",
"type": "module",
"exports": {
"./*": [
Expand Down
4 changes: 3 additions & 1 deletion packages/ui-components/scripts/publish.mjs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { spawnSync } from 'node:child_process';
import { writeFile } from 'node:fs/promises';
import { writeFile, copyFile } from 'node:fs/promises';

import pkg from '../package.json' with { type: 'json' };

Expand All @@ -17,6 +17,8 @@ await writeFile(
'utf8'
);

await copyFile('README.md', 'dist/README.md');

// Now, publish the generated `dist` folder
const { status, error } = spawnSync('pnpm', ['publish', '--no-git-checks'], {
cwd: 'dist',
Expand Down
23 changes: 23 additions & 0 deletions packages/ui-components/src/Common/Search/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Orama Search Components

This directory contains components for creating a Node.js-styled Orama Search Box.

A search modal is constructed using the following format, but additional components can also be used.

```jsx
<SearchModal client={myOramaClient} placeholder={'Search for something...'}>
<SearchResults
noResultsTitle={'No results found for'}
onHit={hit => <MySearchItemComponent hit={hit} />}
>
{/* If you want to include search suggestions, there's a SearchSuggestions
component */}
<SearchSuggestions
suggestions={['You should search this', 'or this']}
label={'Suggestions'}
/>
</SearchResults>
</SearchModal>
```

(For this example, `myOramaClient` and `MySearchItemComponent` refer to the Orama client, and search item component, respectively. These variables **are not** included in @node-core/ui-components at this time)
Loading