p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: p-sw:main
Branches Tags
p-sw:main
p-sw:cli@0.5.1
p-sw:cli@0.5.0
p-sw:cli@0.4.1
p-sw:cli@0.4.0
p-sw:cli@0.3.0
p-sw:cli@0.2.1
p-sw:cli@0.2.0
p-sw:cli@0.1.0
..
compare: p-sw:cli@0.3.0
Branches Tags
p-sw:main
p-sw:cli@0.5.1
p-sw:cli@0.5.0
p-sw:cli@0.4.1
p-sw:cli@0.4.0
p-sw:cli@0.3.0
p-sw:cli@0.2.1
p-sw:cli@0.2.0
p-sw:cli@0.1.0

No commits in common. "main" and "cli@0.3.0" have entirely different histories.
main ... cli@0.3.0

158 changed files with 9589 additions and 3031 deletions
Show Stats Expand all files Collapse all files

62
.github/workflows/lint.yml vendored
View File

@ -1,62 +0,0 @@
name: lint-and-check
on: [ pull_request,push]
jobs:
cli-check:
runs-on: ubuntu-latest
name: CLI Check
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "20"
cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Enable Corepack
run: |
corepack enable
- name: Restore cache
uses: actions/cache@v4
with:
path: .yarn/cache
key: ${{ runner.os }}-ui-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-ui-
- name: Install dependencies
run: |
yarn install
- name: Lint
run: yarn cli lint --write
- name: Build
run: yarn cli build
component-check:
runs-on: ubuntu-latest
name: Component Check
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "20"
cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Enable Corepack
run: |
corepack enable
- name: Restore cache
uses: actions/cache@v4
with:
path: .yarn/cache
key: ${{ runner.os }}-ui-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-ui-
- name: Install dependencies
run: |
yarn install
- name: Lint
run: yarn react lint --write
- name: TypeScript Compile
run: yarn react tsc

56
.github/workflows/react.yml vendored Normal file
View File

@ -0,0 +1,56 @@
name: Deploy React Webpage
on:
push:
branches: ["main"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "20"
cache: ${{ steps.detect-package-manager.outputs.manager }}
- name: Enable corepack
id: enable-corepack
run: |
corepack enable
- name: Restore cache
uses: actions/cache@v4
with:
path: |
.next/cache
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
- name: Install dependencies
run: yarn install
- name: Build React
run: yarn react:build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./packages/react/dist
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

7
.idea/biome.xml generated
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="BiomeSettings">
<option name="applySafeFixesOnSave" value="true" />
<option name="formatOnSave" value="true" />
</component>
</project>

1
.vscode/settings.json vendored
View File

@ -4,3 +4,4 @@
["[cC]olors\\s*\\=\\s*{([^]*(?=}))}", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
}

20
.zed/settings.json
View File

@ -1,20 +0,0 @@
{
"lsp": {
"tailwindcss-language-server": {
"settings": {
"experimental": {
"classRegex": [
["vcn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["[cC]olors\\s*\\=\\s*{([^]*(?=}))}", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
}
}
}
},
"formatter": {
"language_server": {
"name": "biome"
}
},
"format_on_save": "on"
}

83
README.md
View File

@ -1,58 +1,11 @@
<p align="center">
<img src="https://raw.githubusercontent.com/pswui/.github/main/Square%20Logo%20Rounded.png" width="200" height="200" />
</p>
<p align="center">
Meet our beautiful <a href="https://ui.psw.kr">web documentation</a>.
</p>
# PSW-UI
> Build your components in isolation
Shared UI Component Repository.
**There are a lot of component libraries out there, but why it install so many things?**
My goal is to create **fully typesafe**, **highly customizable** component with **minimum complexity**.
## Introduction
Meet our [web documentation](https://ui.psw.kr)!
> Beautifully designed, easily copy & pastable, fully customizable - that means it only depends on few dependencies.
This is **UI kit**, a collection of re-usable components that you can copy and paste into your apps.
This UI kit is inspired by [shadcn/ui](https://ui.shadcn.com/) - but it is more customizable.
**More customizable?**
shadcn/ui depends on a lot of packages to provide functionality to its components.
Radix UI, React DayPicker, Embla Carousel...
I'm not saying it's a bad thing.
But when you depends on a lot of package - you easily mess up your package.json, and you can't even edit a single feature.
The only thing you can customize is **style**.
If there's a bug that needs to be fixed quickly, or a feature that doesn't work the way you want it to,
you'll want to tweak it to your liking. This is where relying on a lot of packages can be poison.
PSW/UI solves this - by **NOT** depending on any other packages than framework like React, TailwindCSS, and tailwind-merge.
You can just copy it, and all functionality is contained in a single file.
## Roadmap
First of all, this project is alpha.
You can see a lot of components are missing, and some component is buggy.
I'm working with this priority:
1. Adding new component, with stable features.
2. Fixing bugs with existing components.
3. Make it looks nice.
Also, there is a [Github README](https://github.com/pswui/ui) for component implementation plans.
You can see what component is implemented, or planned to be implemented.
If you have any ideas or suggestions, please let me know in [Github Issues](https://github.com/pswui/ui/issues).
## Milestones
@ -62,6 +15,11 @@ If you have any ideas or suggestions, please let me know in [Github Issues](http
- [ ] FileInput
- [ ] ImageInput
- [ ] Form
- [ ] FormItem
- [ ] FormLabel
- [ ] FormControl
- [ ] FormDescription
- [ ] FormMessage
- [ ] Textarea
- [ ] Accordion
- [ ] Alert
@ -95,35 +53,24 @@ If you have any ideas or suggestions, please let me know in [Github Issues](http
- [ ] Toggle
- [ ] Toggle Group
- [x] Tooltip
- Library/Framework Support
- [ ] React
- [ ] Svelte
- CLI
- [x] Add
- [x] List
- [x] Search
## Building local development environment
```bash
# Corepack - Yarn 4.2.2
corepack enable
corepack install yarn@4.2.2
corepack use yarn@4.2.2
# Install Packages
yarn install
# Script running in workspace
yarn react dev # `yarn dev` in react workspace
yarn cli build # `yarn build` in cli workspace
# Run Storybook
yarn workspace react storybook
```
## Project Structure
* `registry.json` - for CLI component registry
* `packages/react` - React components
* `components` - component files & directories
* `lib` - shared utility used by component
* `src` - small test area
* `packages/cli` - CLI package using [oclif](https://oclif.io)
* `src/commands` - command class declaration
* `src/components` - React component used by CLI via [ink](https://www.npmjs.com/package/ink)
* `src/helpers` - utility functions that helps CLI
* `const.ts` - constant & small value builder (like URL) & types & interfaces
* `public.ts` - will be exported

27
biome.json
View File

@ -1,27 +0,0 @@
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true,
"defaultBranch": "main"
},
"organizeImports": {
"enabled": true
},
"formatter": {
"enabled": true,
"formatWithErrors": false,
"attributePosition": "multiline",
"indentWidth": 2,
"indentStyle": "space",
"lineEnding": "lf",
"lineWidth": 80
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}

18
lefthook.yml
View File

@ -1,18 +0,0 @@
pre-commit:
commands:
biome_write:
glob: "*.{ts,tsx,json}"
run: yarn biome check --write --no-errors-on-unmatched --files-ignore-unknown=true {staged_files} && git update-index --again
pre-push:
commands:
biome_check:
glob: "*.{ts,tsx,json}"
run: yarn biome check --no-errors-on-unmatched --files-ignore-unknown=true {all_files}
react_tsc:
glob: "packages/react/*.{ts,tsx}"
root: "packages/react/"
run: yarn tsc
cli_tsc:
glob: "packages/cli/*.{ts,tsx}"
root: "packages/cli/"
run: yarn tsc

12
package.json
View File

@ -5,9 +5,11 @@
"repository": "https://github.com/pswui/ui",
"author": "p-sw <shinwoo.park@psw.kr>",
"license": "MIT",
"workspaces": ["packages/*", "components"],
"workspaces": [
"packages/*",
"components"
],
"scripts": {
"postinstall": "lefthook install",
"react": "yarn workspace react",
"cli": "yarn workspace @psw-ui/cli",
"react:build": "yarn workspace react build",
@ -15,9 +17,5 @@
"cli:build": "yarn workspace @psw-ui/cli build"
},
"private": true,
"packageManager": "yarn@4.4.0+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb",
"devDependencies": {
"@biomejs/biome": "1.8.3",
"lefthook": "^1.6.18"
}
"packageManager": "yarn@4.2.2+sha512.c44e283c54e02de9d1da8687025b030078c1b9648d2895a65aab8e64225bfb7becba87e1809fc0b4b6778bbd47a1e2ab6ac647de4c5e383a53a7c17db6c3ff4b"
}

1
packages/cli/.eslintignore Normal file
View File

@ -0,0 +1 @@
/dist

3
packages/cli/.eslintrc.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": ["oclif", "oclif-typescript", "prettier"]
}

8
packages/cli/.mocharc.json
View File

@ -1,6 +1,10 @@
{
"require": ["ts-node/register"],
"watch-extensions": ["ts"],
"require": [
"ts-node/register"
],
"watch-extensions": [
"ts"
],
"recursive": true,
"reporter": "spec",
"timeout": 60000,

1
packages/cli/.prettierrc.json Normal file
View File

@ -0,0 +1 @@
"@oclif/prettier-config"

15
packages/cli/README.md
View File

@ -20,7 +20,7 @@ $ npm install -g @psw-ui/cli
$ pswui COMMAND
running command...
$ pswui (--version)
@psw-ui/cli/0.5.0 linux-x64 node-v20.13.1
@psw-ui/cli/0.2.0 linux-x64 node-v20.13.1
$ pswui --help [COMMAND]
USAGE
$ pswui COMMAND
@ -32,7 +32,6 @@ USAGE
* [`pswui add [NAME]`](#pswui-add-name)
* [`pswui help [COMMAND]`](#pswui-help-command)
* [`pswui list`](#pswui-list)
* [`pswui search`](#pswui-search)
## `pswui add [NAME]`
@ -46,10 +45,10 @@ ARGUMENTS
NAME name of component to install
FLAGS
-F, --forceShared override the existing shared.ts and update it to latest
-c, --components=<value> place for installation of components
-f, --force override the existing file
-p, --config=<value> path to config
-r, --branch=<value> use other branch instead of main
-s, --shared=<value> place for installation of shared.ts
DESCRIPTION
@ -59,7 +58,7 @@ EXAMPLES
$ pswui add
```
_See code: [packages/cli/src/commands/add.tsx](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/add.tsx)_
_See code: [packages/cli/src/commands/add.tsx](https://github.com/pswui/ui/blob/cli@0.3.0/packages/cli/src/commands/add.tsx)_
## `pswui help [COMMAND]`
@ -91,7 +90,6 @@ USAGE
FLAGS
-p, --config=<value> path to config
-r, --branch=<value> use other branch instead of main
-u, --url include component file URL
DESCRIPTION
@ -101,7 +99,7 @@ EXAMPLES
$ pswui list
```
_See code: [packages/cli/src/commands/list.ts](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/list.ts)_
_See code: [packages/cli/src/commands/list.ts](https://github.com/pswui/ui/blob/cli@0.3.0/packages/cli/src/commands/list.ts)_
## `pswui search`
@ -116,9 +114,6 @@ USAGE
ARGUMENTS
QUERY search query
FLAGS
-r, --branch=<value> use other branch instead of main
DESCRIPTION
Search components.
@ -126,5 +121,5 @@ EXAMPLES
$ pswui search
```
_See code: [packages/cli/src/commands/search.tsx](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/search.tsx)_
_See code: [packages/cli/src/commands/search.tsx](https://github.com/pswui/ui/blob/cli@0.3.0/packages/cli/src/commands/search.tsx)_
<!-- commandsstop -->

4
packages/cli/bin/dev.js
View File

@ -1,6 +1,6 @@
#!/usr/bin/env -S node --loader ts-node/esm --no-warnings=ExperimentalWarning
// eslint-disable-next-line n/shebang
import { execute } from "@oclif/core";
import {execute} from '@oclif/core'
await execute({ development: true, dir: import.meta.url });
await execute({development: true, dir: import.meta.url})

4
packages/cli/bin/run.js
View File

@ -1,5 +1,5 @@
#!/usr/bin/env node
import { execute } from "@oclif/core";
import {execute} from '@oclif/core'
await execute({ dir: import.meta.url });
await execute({dir: import.meta.url})

24
packages/cli/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@psw-ui/cli",
"description": "CLI for PSW/UI",
"version": "0.5.1",
"version": "0.3.0",
"author": "p-sw",
"bin": {
"pswui": "./bin/run.js"
@ -20,23 +20,33 @@
"zod": "^3.23.8"
},
"devDependencies": {
"@oclif/prettier-config": "^0.2.1",
"@oclif/test": "^4",
"@types/chai": "^4",
"@types/ink-divider": "^2.0.4",
"@types/node": "^18",
"chai": "^4",
"eslint": "^8",
"eslint-config-oclif": "^5",
"eslint-config-oclif-typescript": "^3",
"eslint-config-prettier": "^9",
"oclif": "^4",
"shx": "^0.3.3",
"tailwind-scrollbar": "^3.1.0",
"ts-node": "^10",
"typescript": "^5"
},
"engines": {
"node": ">=18.0.0"
},
"files": ["/bin", "/dist", "/oclif.manifest.json"],
"files": [
"/bin",
"/dist",
"/oclif.manifest.json"
],
"homepage": "https://ui.psw.kr",
"keywords": ["oclif"],
"keywords": [
"oclif"
],
"license": "MIT",
"main": "dist/index.js",
"type": "module",
@ -44,7 +54,9 @@
"bin": "pswui",
"dirname": "pswui",
"commands": "./dist/commands",
"plugins": ["@oclif/plugin-help"],
"plugins": [
"@oclif/plugin-help"
],
"topicSeparator": " ",
"topics": {
"hello": {
@ -55,7 +67,7 @@
"repository": "pswui/ui",
"scripts": {
"build": "shx rm -rf dist && tsc",
"lint": "biome check --no-errors-on-unmatched",
"lint": "eslint . --ext .ts",
"prepack": "yarn build"
},
"types": "dist/index.d.ts"

330
packages/cli/src/commands/add.tsx
View File

@ -1,43 +1,42 @@
import { existsSync } from "node:fs";
import { mkdir, writeFile } from "node:fs/promises";
import { join } from "node:path";
import { Args, Command, Flags } from "@oclif/core";
import { colorize } from "@oclif/core/ux";
import { Box, render } from "ink";
import ora from "ora";
import React, { type ComponentPropsWithoutRef } from "react";
import { Choice } from "../components/Choice.js";
import { SearchBox } from "../components/SearchBox.js";
import { loadConfig, validateConfig } from "../helpers/config.js";
import {
checkComponentInstalled,
getDirComponentRequiredFiles,
} from "../helpers/path.js";
import {Args, Command, Flags} from '@oclif/core'
import {loadConfig, validateConfig} from '../helpers/config.js'
import {existsSync} from 'node:fs'
import {mkdir, writeFile} from 'node:fs/promises'
import {join} from 'node:path'
import {
getAvailableComponentNames,
getComponentLibVersion,
getComponentRealname,
getComponentURL,
getDirComponentURL,
getLibURL,
getRegistry,
} from "../helpers/registry.js";
import { safeFetch } from "../helpers/safe-fetcher.js";
} from '../helpers/registry.js'
import ora from 'ora'
import React, {ComponentPropsWithoutRef} from 'react'
import {render, Box} from 'ink'
import {SearchBox} from '../components/SearchBox.js'
import {getComponentsInstalled} from '../helpers/path.js'
import {Choice} from '../components/Choice.js'
import {colorize} from '@oclif/core/ux'
function Generator() {
let complete = false;
let complete: boolean = false
function ComponentSelector<
T extends { displayName: string; key: string; installed: boolean },
>(props: Omit<ComponentPropsWithoutRef<typeof SearchBox<T>>, "helper">) {
function ComponentSelector<T extends {displayName: string; key: string; installed: boolean}>(
props: Omit<ComponentPropsWithoutRef<typeof SearchBox<T>>, 'helper'>,
) {
return (
<Box>
<SearchBox
helper={"Press Enter to select component."}
helper={'Press Enter to select component.'}
{...props}
onSubmit={(value) => {
complete = true;
props.onSubmit?.(value);
complete = true
props.onSubmit?.(value)
}}
/>
</Box>
);
)
}
return [
@ -45,31 +44,29 @@ function Generator() {
new Promise<void>((r) => {
const i = setInterval(() => {
if (complete) {
r();
clearInterval(i);
r()
clearInterval(i)
}
}, 100);
}, 100)
}),
] as const;
] as const
}
function Generator2() {
let complete = false;
let complete = false
function ForceSelector({
onComplete,
}: { onComplete: (value: "yes" | "no") => void }) {
function ForceSelector({onComplete}: {onComplete: (value: 'yes' | 'no') => void}) {
return (
<Choice
question={"You already installed this component. Overwrite?"}
yes={"Yes, overwrite existing file and install it."}
no={"No, cancel the action."}
question={'You already installed this component. Overwrite?'}
yes={'Yes, overwrite existing file and install it.'}
no={'No, cancel the action.'}
onSubmit={(value) => {
complete = true;
onComplete(value);
complete = true
onComplete(value)
}}
/>
);
)
}
return [
@ -77,237 +74,162 @@ function Generator2() {
new Promise<void>((r) => {
const i = setInterval(() => {
if (complete) {
r();
clearInterval(i);
r()
clearInterval(i)
}
}, 100);
}, 100)
}),
] as const;
] as const
}
export default class Add extends Command {
static override args = {
name: Args.string({ description: "name of component to install" }),
};
name: Args.string({description: 'name of component to install'}),
}
static override description = "Add a component to the project.";
static override description = 'Add a component to the project.'
static override examples = ["<%= config.bin %> <%= command.id %>"];
static override examples = ['<%= config.bin %> <%= command.id %>']
static override flags = {
branch: Flags.string({
char: "r",
description: "use other branch instead of main",
}),
force: Flags.boolean({
char: "f",
description: "override the existing file",
}),
config: Flags.string({ char: "p", description: "path to config" }),
shared: Flags.string({
char: "s",
description: "place for installation of shared.ts",
}),
components: Flags.string({
char: "c",
description: "place for installation of components",
}),
};
force: Flags.boolean({char: 'f', description: 'override the existing file'}),
config: Flags.string({char: 'p', description: 'path to config'}),
shared: Flags.string({char: 's', description: 'place for installation of shared.ts'}),
components: Flags.string({char: 'c', description: 'place for installation of components'}),
}
public async run(): Promise<void> {
let {
args,
flags: {force, ...flags},
} = await this.parse(Add);
} = await this.parse(Add)
const resolvedConfig = await validateConfig(
(message: string) => this.log(message),
await loadConfig(flags.config),
);
const componentFolder = join(
process.cwd(),
resolvedConfig.paths.components,
);
const libFolder = join(process.cwd(), resolvedConfig.paths.lib);
const resolvedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
const componentFolder = join(process.cwd(), resolvedConfig.paths.components)
const libFolder = join(process.cwd(), resolvedConfig.paths.lib)
const sharedFileBeforeResolve = join(libFolder, 'shared@version.tsx')
if (!existsSync(componentFolder)) {
await mkdir(componentFolder, { recursive: true });
await mkdir(componentFolder, {recursive: true})
}
if (!existsSync(libFolder)) {
await mkdir(libFolder, { recursive: true });
await mkdir(libFolder, {recursive: true})
}
const loadRegistryOra = ora("Fetching registry...").start();
if (flags.registry) {
this.log(`Using ${flags.branch} for branch.`);
}
const unsafeRegistry = await getRegistry(flags.branch);
const loadRegistryOra = ora('Fetching registry...').start()
const unsafeRegistry = await getRegistry()
if (!unsafeRegistry.ok) {
loadRegistryOra.fail(unsafeRegistry.message);
return;
loadRegistryOra.fail(unsafeRegistry.message)
return
}
const registry = unsafeRegistry.registry;
const componentNames = Object.keys(registry.components);
loadRegistryOra.succeed(
`Successfully fetched registry! (${componentNames.length} components)`,
);
const searchBoxComponent: {
displayName: string;
key: string;
installed: boolean;
}[] = [];
for await (const name of componentNames) {
const installed = await checkComponentInstalled(
registry.components[name],
resolvedConfig,
);
searchBoxComponent.push({
displayName: installed ? `${name} (installed)` : name,
const registry = unsafeRegistry.registry
const componentNames = await getAvailableComponentNames(registry)
loadRegistryOra.succeed(`Successfully fetched registry! (${componentNames.length} components)`)
const componentRealNames = await Promise.all(
componentNames.map(async (name) => await getComponentRealname(registry, name)),
)
const installed = await getComponentsInstalled(componentRealNames, resolvedConfig)
const searchBoxComponent = componentNames.map((name, index) => ({
displayName: installed.includes(componentRealNames[index]) ? `${name} (installed)` : name,
key: name,
installed,
});
}
installed: installed.includes(componentRealNames[index]),
}))
let name: string | undefined = args.name?.toLowerCase?.();
let name: string | undefined = args.name?.toLowerCase?.()
let requireForce: boolean =
!name || !componentNames.includes(name.toLowerCase())
? false
: searchBoxComponent.find(({key}) => key === name)?.installed
? !force
: false;
: false
if (!name || !componentNames.includes(name.toLowerCase())) {
const [ComponentSelector, waitForComplete] = Generator();
const [ComponentSelector, waitForComplete] = Generator()
const inkInstance = render(
<ComponentSelector
components={searchBoxComponent}
initialQuery={args.name}
onSubmit={(comp) => {
name = comp.key;
requireForce = comp.installed;
inkInstance.clear();
name = comp.key
requireForce = comp.installed
inkInstance.clear()
}}
/>,
);
await waitForComplete;
inkInstance.unmount();
)
await waitForComplete
inkInstance.unmount()
}
let quit = false;
let quit = false
if (requireForce) {
const [ForceSelector, waitForComplete] = Generator2();
const [ForceSelector, waitForComplete] = Generator2()
const inkInstance = render(
<ForceSelector
onComplete={(value) => {
force = value === "yes";
quit = value === "no";
inkInstance.clear();
force = value === 'yes'
quit = value === 'no'
inkInstance.clear()
}}
/>,
);
await waitForComplete;
inkInstance.unmount();
)
await waitForComplete
inkInstance.unmount()
if (quit) {
this.log(colorize("redBright", "Installation canceled by user."));
return;
this.log(colorize('redBright', 'Installation canceled by user.'))
return
}
}
if (!name || !componentNames.includes(name.toLowerCase())) {
this.error("Component name is not provided, or not selected.");
this.error('Component name is not provided, or not selected.')
}
const libFileOra = ora("Installing required library...").start();
let successCount = 0;
for await (const libFile of registry.lib) {
const filePath = join(libFolder, libFile);
if (!existsSync(filePath)) {
const libFileContentResponse = await safeFetch(
registry.base + registry.paths.lib.replace("{libName}", libFile),
);
if (!libFileContentResponse.ok) {
libFileOra.fail(libFileContentResponse.message);
return;
const resolvedName: keyof typeof registry.components = name
const sharedFileOra = ora('Installing required module...').start()
const requiredVersion = await getComponentLibVersion(registry, resolvedName)
if (!requiredVersion.ok) {
sharedFileOra.fail(`Registry error: there is no lib version ${requiredVersion.libVersion}`)
return
}
const libFileContent = await libFileContentResponse.response.text();
await writeFile(filePath, libFileContent);
successCount++;
const sharedFile = sharedFileBeforeResolve.replace('version', requiredVersion.libVersion)
if (!existsSync(sharedFile)) {
const sharedFileContentResponse = await fetch(await getLibURL(registry, requiredVersion.libVersion))
if (!sharedFileContentResponse.ok) {
sharedFileOra.fail(
`Error while fetching shared module content: ${sharedFileContentResponse.status} ${sharedFileContentResponse.statusText}`,
)
return
}
}
if (successCount > 1) {
libFileOra.succeed("Successfully installed library files!");
const sharedFileContent = await sharedFileContentResponse.text()
await writeFile(sharedFile, sharedFileContent)
sharedFileOra.succeed('Shared module is successfully installed!')
} else {
libFileOra.succeed("Library files are already installed!");
sharedFileOra.succeed('Shared module is already installed!')
}
const componentFileOra = ora(`Installing ${name} component...`).start();
const componentObject = registry.components[name];
if (componentObject.type === "file") {
const componentFile = join(
componentFolder,
registry.components[name].name,
);
const componentFileOra = ora(`Installing ${name} component...`).start()
const componentFile = join(componentFolder, registry.components[name].name)
if (existsSync(componentFile) && !force) {
componentFileOra.succeed(
`Component is already installed! (${componentFile})`,
);
componentFileOra.succeed(`Component is already installed! (${componentFile})`)
} else {
const componentFileContentResponse = await safeFetch(
await getComponentURL(registry, componentObject),
);
const componentFileContentResponse = await fetch(await getComponentURL(registry, name))
if (!componentFileContentResponse.ok) {
componentFileOra.fail(componentFileContentResponse.message);
return;
}
const componentFileContent = (
await componentFileContentResponse.response.text()
).replaceAll(/import\s+{[^}]*}\s+from\s+"@pswui-lib"/g, (match) =>
match.replace(/@pswui-lib/, resolvedConfig.import.lib),
);
await writeFile(componentFile, componentFileContent);
componentFileOra.succeed("Component is successfully installed!");
}
} else if (componentObject.type === "dir") {
const componentDir = join(componentFolder, componentObject.name);
if (!existsSync(componentDir)) {
await mkdir(componentDir, { recursive: true });
}
const requiredFiles = await getDirComponentRequiredFiles(
componentObject,
resolvedConfig,
);
if (requiredFiles.length === 0 && !force) {
componentFileOra.succeed(
`Component is already installed! (${componentDir})`,
);
} else {
const requiredFilesURLs = await getDirComponentURL(
registry,
componentObject,
requiredFiles,
);
for await (const [filename, url] of requiredFilesURLs) {
const componentFile = join(componentDir, filename);
if (!existsSync(componentFile) || force) {
const componentFileContentResponse = await safeFetch(url);
if (!componentFileContentResponse.ok) {
componentFileOra.fail(componentFileContentResponse.message);
return;
}
const componentFileContent = (
await componentFileContentResponse.response.text()
).replaceAll(/import\s+{[^}]*}\s+from\s+"@pswui-lib"/g, (match) =>
match.replace(/@pswui-lib/, resolvedConfig.import.lib),
);
await writeFile(componentFile, componentFileContent);
}
}
componentFileOra.succeed("Component is successfully installed!");
componentFileOra.fail(
`Error while fetching component file content: ${componentFileContentResponse.status} ${componentFileContentResponse.statusText}`,
)
return
}
const componentFileContent = (await componentFileContentResponse.text()).replaceAll(
/import\s+{[^}]*}\s+from\s+"@pswui-lib\/shared@[0-9.]+"/g,
(match) => match.replace(/@pswui-lib\/(shared@[0-9.]+)/, `${resolvedConfig.import.lib}/$1`),
)
await writeFile(componentFile, componentFileContent)
componentFileOra.succeed('Component is successfully installed!')
}
this.log("Now you can import the component.");
this.log('Now you can import the component.')
}
}

104
packages/cli/src/commands/list.ts
View File

@ -1,89 +1,59 @@
import { Command, Flags } from "@oclif/core";
import ora from "ora";
import treeify from "treeify";
import { loadConfig, validateConfig } from "../helpers/config.js";
import { checkComponentInstalled } from "../helpers/path.js";
import {
getComponentURL,
getDirComponentURL,
getRegistry,
} from "../helpers/registry.js";
import {Command, Flags} from '@oclif/core'
import {getAvailableComponentNames, getRegistry, getComponentURL, getComponentRealname} from '../helpers/registry.js'
import ora from 'ora'
import treeify from 'treeify'
import {CONFIG_DEFAULT_PATH} from '../const.js'
import {loadConfig, validateConfig} from '../helpers/config.js'
import {getComponentsInstalled} from '../helpers/path.js'
export default class List extends Command {
static override description =
"Prints all available components in registry and components installed in this project.";
static override description = 'Prints all available components in registry and components installed in this project.'
static override examples = ["<%= config.bin %> <%= command.id %>"];
static override examples = ['<%= config.bin %> <%= command.id %>']
static override flags = {
branch: Flags.string({
char: "r",
description: "use other branch instead of main",
}),
config: Flags.string({ char: "p", description: "path to config" }),
url: Flags.boolean({
char: "u",
description: "include component file URL",
}),
};
url: Flags.boolean({char: 'u', description: 'include component file URL'}),
config: Flags.string({char: 'p', description: 'path to config'}),
}
public async run(): Promise<void> {
const { flags } = await this.parse(List);
const {flags} = await this.parse(List)
const registrySpinner = ora("Fetching registry...");
const registrySpinner = ora('Fetching registry...')
const getInstalledSpinner = ora('Getting installed components...')
const loadedConfig = await validateConfig(
(message: string) => this.log(message),
await loadConfig(flags.config),
);
const loadedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
registrySpinner.start();
if (flags.branch) {
this.log(`Using ${flags.branch} for registry.`);
}
const unsafeRegistry = await getRegistry(flags.branch);
registrySpinner.start()
const unsafeRegistry = await getRegistry()
if (!unsafeRegistry.ok) {
registrySpinner.fail(unsafeRegistry.message);
return;
registrySpinner.fail(unsafeRegistry.message)
return
}
const registry = unsafeRegistry.registry
registrySpinner.succeed(`Fetched ${Object.keys(registry.components).length} components.`)
const { registry } = unsafeRegistry;
const names = Object.keys(registry.components);
const names = await getAvailableComponentNames(registry)
registrySpinner.succeed(`Fetched ${names.length} components.`);
let final: Record<
string,
{ URL?: Record<string, string>; installed: "no" | "yes" }
> = {};
for await (const name of names) {
const componentObject = registry.components[name];
const installed = (await checkComponentInstalled(
componentObject,
getInstalledSpinner.start()
const installedNames = await getComponentsInstalled(
await Promise.all(names.map(async (name) => await getComponentRealname(registry, name))),
loadedConfig,
))
? "yes"
: "no";
)
getInstalledSpinner.succeed(`Got ${installedNames.length} installed components.`)
let final: Record<string, {URL?: string; installed: 'yes' | 'no'}> = {}
for (const name of names) {
const installed = installedNames.includes(await getComponentRealname(registry, name)) ? 'yes' : 'no'
if (flags.url) {
let url: Record<string, string> = {};
if (componentObject.type === "file") {
url[name] = await getComponentURL(registry, componentObject);
} else if (componentObject.type === "dir") {
url = Object.fromEntries(
await getDirComponentURL(registry, componentObject),
);
}
final = { ...final, [name]: { URL: url, installed } };
const url = await getComponentURL(registry, name)
final = {...final, [name]: {URL: url, installed}}
} else {
final = { ...final, [name]: { installed } };
final = {...final, [name]: {installed}}
}
}
this.log("AVAILABLE COMPONENTS");
this.log(treeify.asTree(final, true, true));
this.log('AVAILABLE COMPONENTS')
this.log(treeify.asTree(final, true, true))
}
}

42
packages/cli/src/commands/search.tsx
View File

@ -1,45 +1,35 @@
import { Args, Command, Flags } from "@oclif/core";
import { render } from "ink";
import React from "react";
import { SearchBox } from "../components/SearchBox.js";
import { getRegistry } from "../helpers/registry.js";
import {Command, Args} from '@oclif/core'
import {render} from 'ink'
import {SearchBox} from '../components/SearchBox.js'
import {getAvailableComponentNames, getRegistry} from '../helpers/registry.js'
import React from 'react'
export default class Search extends Command {
static override args = {
query: Args.string({ description: "search query" }),
};
query: Args.string({description: 'search query'}),
}
static override flags = {
branch: Flags.string({
char: "r",
description: "use other branch instead of main",
}),
};
static override description = 'Search components.'
static override description = "Search components.";
static override examples = ["<%= config.bin %> <%= command.id %>"];
static override examples = ['<%= config.bin %> <%= command.id %>']
public async run(): Promise<void> {
const { args, flags } = await this.parse(Search);
const {args} = await this.parse(Search)
if (flags.branch) {
this.log(`Using ${flags.branch} for registry.`);
}
const registryResult = await getRegistry(flags.branch);
const registryResult = await getRegistry()
if (!registryResult.ok) {
this.error(registryResult.message);
this.error(registryResult.message)
}
const registry = registryResult.registry;
const componentNames = Object.keys(registry.components);
const registry = registryResult.registry
const componentNames = await getAvailableComponentNames(registry)
await render(
<SearchBox
components={componentNames.map((v) => ({key: v, displayName: v}))}
initialQuery={args.query}
helper={"Press ESC to quit"}
helper={'Press ESC to quit'}
onKeyDown={(_, k, app) => k.escape && app.exit()}
/>,
).waitUntilExit();
).waitUntilExit()
}
}

69
packages/cli/src/components/Choice.tsx
View File

@ -1,26 +1,26 @@
import { Box, Text, useInput } from "ink";
import React, { useState } from "react";
import React, {useState} from 'react'
import {Box, Text, useInput} from 'ink'
function isUnicodeSupported() {
if (process.platform !== "win32") {
return process.env.TERM !== "linux"; // Linux console (kernel)
if (process.platform !== 'win32') {
return process.env['TERM'] !== 'linux' // Linux console (kernel)
}
return (
Boolean(process.env.WT_SESSION) || // Windows Terminal
Boolean(process.env.TERMINUS_SUBLIME) || // Terminus (<0.2.27)
process.env.ConEmuTask === "{cmd::Cmder}" || // ConEmu and cmder
process.env.TERM_PROGRAM === "Terminus-Sublime" ||
process.env.TERM_PROGRAM === "vscode" ||
process.env.TERM === "xterm-256color" ||
process.env.TERM === "alacritty" ||
process.env.TERMINAL_EMULATOR === "JetBrains-JediTerm"
);
Boolean(process.env['WT_SESSION']) || // Windows Terminal
Boolean(process.env['TERMINUS_SUBLIME']) || // Terminus (<0.2.27)
process.env['ConEmuTask'] === '{cmd::Cmder}' || // ConEmu and cmder
process.env['TERM_PROGRAM'] === 'Terminus-Sublime' ||
process.env['TERM_PROGRAM'] === 'vscode' ||
process.env['TERM'] === 'xterm-256color' ||
process.env['TERM'] === 'alacritty' ||
process.env['TERMINAL_EMULATOR'] === 'JetBrains-JediTerm'
)
}
const shouldUseMain = isUnicodeSupported();
const SELECTED: string = shouldUseMain ? "◉" : "(*)";
const UNSELECTED: string = shouldUseMain ? "◯" : "( )";
const shouldUseMain = isUnicodeSupported()
const SELECTED: string = shouldUseMain ? '◉' : '(*)'
const UNSELECTED: string = shouldUseMain ? '◯' : '( )'
export function Choice({
question,
@ -29,38 +29,35 @@ export function Choice({
onSubmit,
initial,
}: {
question: string;
yes: string;
no: string;
onSubmit?: (vaule: "yes" | "no") => void;
initial?: "yes" | "no";
question: string
yes: string
no: string
onSubmit?: (vaule: 'yes' | 'no') => void
initial?: 'yes' | 'no'
}) {
const [state, setState] = useState<"yes" | "no">(initial ?? "yes");
const [state, setState] = useState<'yes' | 'no'>(initial ?? 'yes')
useInput((_, k) => {
if (k.upArrow) {
setState("yes");
setState('yes')
} else if (k.downArrow) {
setState("no");
setState('no')
}
if (k.return) {
onSubmit?.(state);
onSubmit?.(state)
}
});
})
return (
<Box
display={"flex"}
flexDirection={"column"}
>
<Text color={"greenBright"}>{question}</Text>
<Text color={state === "yes" ? undefined : "gray"}>
{state === "yes" ? SELECTED : UNSELECTED} {yes}
<Box display={'flex'} flexDirection={'column'}>
<Text color={'greenBright'}>{question}</Text>
<Text color={state === 'yes' ? undefined : 'gray'}>
{state === 'yes' ? SELECTED : UNSELECTED} {yes}
</Text>
<Text color={state === "no" ? undefined : "gray"}>
{state === "no" ? SELECTED : UNSELECTED} {no}
<Text color={state === 'no' ? undefined : 'gray'}>
{state === 'no' ? SELECTED : UNSELECTED} {no}
</Text>
</Box>
);
)
}

18
packages/cli/src/components/Divider.tsx
View File

@ -1,32 +1,24 @@
import { Box, Text } from "ink";
import React from "react";
import React from 'react'
import {Box, Text} from 'ink'
export function Divider({
width = 50,
padding = 1,
title,
}: { width?: number; padding?: number; title: string }) {
const length = Math.floor((width - title.length - padding * 2) / 2);
export function Divider({width = 50, padding = 1, title}: {width?: number; padding?: number; title: string}) {
const length = Math.floor((width - title.length - padding * 2) / 2)
return (
<Box>
{Array.from(Array(length)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}>─</Text>
))}
{Array.from(Array(padding)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}> </Text>
))}
<Text>{title}</Text>
{Array.from(Array(padding)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}> </Text>
))}
{Array.from(Array(length)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}>─</Text>
))}
</Box>
);
)
}

121
packages/cli/src/components/SearchBox.tsx
View File

@ -1,8 +1,8 @@
import { Box, type Key, Text, useApp, useInput } from "ink";
import Input from "ink-text-input";
import React, { useEffect, useState } from "react";
import { getSuggestion } from "../helpers/search.js";
import { Divider } from "./Divider.js";
import React, {useEffect, useState} from 'react'
import {getSuggestion} from '../helpers/search.js'
import Input from 'ink-text-input'
import {Divider} from './Divider.js'
import {Box, Text, useInput, useApp, type Key} from 'ink'
export function SearchBox<T extends {key: string; displayName: string}>({
components,
@ -12,115 +12,92 @@ export function SearchBox<T extends { key: string; displayName: string }>({
onChange,
onSubmit,
}: {
components: T[];
helper: string;
initialQuery?: string;
onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void;
onChange?: (item: T) => void;
onSubmit?: (item: T) => void;
components: T[]
helper: string
initialQuery?: string
onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void
onChange?: (item: T) => void
onSubmit?: (item: T) => void
}) {
const [query, setQuery] = useState<string>(initialQuery ?? "");
const [queryMode, setQueryMode] = useState<boolean>(true);
const [isLoading, setLoading] = useState<boolean>(false);
const [suggestions, setSuggestions] = useState<string[]>([]);
const [selected, setSelected] = useState<number>(-1);
const [query, setQuery] = useState<string>(initialQuery ?? '')
const [queryMode, setQueryMode] = useState<boolean>(true)
const [isLoading, setLoading] = useState<boolean>(false)
const [suggestions, setSuggestions] = useState<string[]>([])
const [selected, setSelected] = useState<number>(-1)
useEffect(() => {
if (queryMode) {
setLoading(true);
setLoading(true)
getSuggestion(
components.map(({key}) => key),
query,
).then((result) => {
setSuggestions(result);
setSelected(-1);
});
setSuggestions(result)
setSelected(-1)
})
}
}, [query, queryMode, components]);
}, [query, queryMode])
useEffect(() => {
if (onChange) {
const found = components.find(({ key }) => key === suggestions[selected]);
found && onChange(found);
const found = components.find(({key}) => key === suggestions[selected])
found && onChange(found)
}
}, [selected, suggestions, onChange, components]);
}, [selected, suggestions, onChange])
const app = useApp();
const app = useApp()
useInput((i, k) => {
if (k.downArrow) {
setSelected((p) => (p >= suggestions.length - 1 ? 0 : p + 1));
setQueryMode(false);
setSelected((p) => (p >= suggestions.length - 1 ? 0 : p + 1))
setQueryMode(false)
}
if (k.upArrow) {
setSelected((p) => (p <= 0 ? suggestions.length - 1 : p - 1));
setQueryMode(false);
setSelected((p) => (p <= 0 ? suggestions.length - 1 : p - 1))
setQueryMode(false)
}
onKeyDown?.(i, k, app);
});
onKeyDown?.(i, k, app)
})
useEffect(() => {
if (!queryMode && suggestions[selected]) {
setQuery(suggestions[selected]);
setQuery(suggestions[selected])
}
}, [queryMode, selected, suggestions]);
}, [queryMode, selected])
return (
<Box
width={50}
display={"flex"}
flexDirection={"column"}
>
<Text color={"gray"}>{helper}</Text>
<Box
display={"flex"}
flexDirection={"row"}
>
<Box
marginRight={1}
display={"flex"}
flexDirection={"row"}
>
<Text color={"greenBright"}>Search?</Text>
<Box width={50} display={'flex'} flexDirection={'column'}>
<Text color={'gray'}>{helper}</Text>
<Box display={'flex'} flexDirection={'row'}>
<Box marginRight={1} display={'flex'} flexDirection={'row'}>
<Text color={'greenBright'}>Search?</Text>
</Box>
<Input
value={query}
onChange={(v) => {
setQueryMode(true);
setQuery(v);
setQueryMode(true)
setQuery(v)
}}
showCursor
placeholder={" query"}
placeholder={' query'}
onSubmit={() => {
const found = components.find(
({ key }) => key === suggestions[selected],
);
found && onSubmit?.(found);
const found = components.find(({key}) => key === suggestions[selected])
found && onSubmit?.(found)
}}
/>
</Box>
<Divider
title={
isLoading ? "Loading..." : `${suggestions.length} components found.`
}
/>
<Box
display={"flex"}
flexDirection={"column"}
>
<Divider title={isLoading ? 'Loading...' : `${suggestions.length} components found.`} />
<Box display={'flex'} flexDirection={'column'}>
{suggestions.map((name, index) => {
return (
<Box key={name}>
<Text color={selected === index ? undefined : "gray"}>
{
components[components.findIndex(({ key }) => key === name)]
.displayName
}
<Text color={selected === index ? undefined : 'gray'}>
{components[components.findIndex(({key}) => key === name)].displayName}
</Text>
</Box>
);
)
})}
</Box>
</Box>
);
)
}

84
packages/cli/src/const.ts
View File

@ -1,75 +1,63 @@
import { z } from "zod";
import z from 'zod'
export const registryURL = (branch: string) =>
`https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json`;
export const CONFIG_DEFAULT_PATH = "pswui.config.js";
export const REGISTRY_URL = 'https://ui.psw.kr/registry.json'
export const CONFIG_DEFAULT_PATH = 'pswui.config.js'
export type RegistryComponent =
| {
files: string[];
name: string;
type: "dir";
interface RegistryComponent {
name: string
libVersion: string
}
| {
name: string;
type: "file";
};
export interface Registry {
base: string;
components: Record<string, RegistryComponent>;
lib: string[];
base: string
paths: {
components: string;
lib: string;
};
components: string
lib: string
}
lib: string[]
components: Record<string, RegistryComponent>
}
export interface Config {
/**
* Absolute path that will used for import in component
*/
import?: {
lib?: "@pswui-lib" | string;
};
/**
* Path that cli will create a file.
*/
paths?: {
components?: "src/pswui/components" | string;
lib?: "src/pswui/lib" | string;
};
components?: 'src/pswui/components' | string
lib?: 'src/pswui/lib' | string
}
/**
* Absolute path that will used for import in component
*/
import?: {
lib?: '@pswui-lib' | string
}
}
export type ResolvedConfig<T = Config> = {
[k in keyof T]-?: NonNullable<T[k]> extends object
? ResolvedConfig<NonNullable<T[k]>>
: T[k];
};
[k in keyof T]-?: NonNullable<T[k]> extends object ? ResolvedConfig<NonNullable<T[k]>> : T[k]
}
export const DEFAULT_CONFIG = {
import: {
lib: "@pswui-lib",
},
paths: {
components: "src/pswui/components",
lib: "src/pswui/lib",
components: 'src/pswui/components',
lib: 'src/pswui/lib',
},
};
import: {
lib: '@pswui-lib',
},
}
export const configZod = z.object({
paths: z
.object({
components: z.string().optional().default(DEFAULT_CONFIG.paths.components),
lib: z.string().optional().default(DEFAULT_CONFIG.paths.lib),
})
.optional()
.default(DEFAULT_CONFIG.paths),
import: z
.object({
lib: z.string().optional().default(DEFAULT_CONFIG.import.lib),
})
.optional()
.default(DEFAULT_CONFIG.import),
paths: z
.object({
components: z
.string()
.optional()
.default(DEFAULT_CONFIG.paths.components),
lib: z.string().optional().default(DEFAULT_CONFIG.paths.lib),
})
.optional()
.default(DEFAULT_CONFIG.paths),
});

75
packages/cli/src/helpers/config.ts
View File

@ -1,67 +1,40 @@
import { existsSync } from "node:fs";
import path from "node:path";
import { colorize } from "@oclif/core/ux";
import {
CONFIG_DEFAULT_PATH,
DEFAULT_CONFIG,
type ResolvedConfig,
configZod,
} from "../const.js";
import { changeExtension } from "./path.js";
import {CONFIG_DEFAULT_PATH, DEFAULT_CONFIG, ResolvedConfig} from '../const.js'
import {configZod} from '../const.js'
import {join} from 'node:path'
import {existsSync} from 'node:fs'
import {changeExtension} from './path.js'
import {colorize} from '@oclif/core/ux'
export async function loadConfig(config?: string): Promise<unknown> {
const userConfigPath = config ? path.join(process.cwd(), config) : null;
const defaultConfigPath = path.join(process.cwd(), CONFIG_DEFAULT_PATH);
const cjsConfigPath = path.join(
process.cwd(),
await changeExtension(CONFIG_DEFAULT_PATH, ".cjs"),
);
const mjsConfigPath = path.join(
process.cwd(),
await changeExtension(CONFIG_DEFAULT_PATH, ".mjs"),
);
const userConfigPath = config ? join(process.cwd(), config) : null
const defaultConfigPath = join(process.cwd(), CONFIG_DEFAULT_PATH)
const cjsConfigPath = join(process.cwd(), await changeExtension(CONFIG_DEFAULT_PATH, '.cjs'))
const mjsConfigPath = join(process.cwd(), await changeExtension(CONFIG_DEFAULT_PATH, '.mjs'))
if (userConfigPath) {
if (existsSync(userConfigPath)) {
return (await import(userConfigPath)).default;
return (await import(userConfigPath)).default
} else {
throw new Error(`Error: config ${userConfigPath} not found.`)
}
throw new Error(`Error: config ${userConfigPath} not found.`);
}
if (existsSync(defaultConfigPath)) {
return (await import(defaultConfigPath)).default;
return (await import(defaultConfigPath)).default
}
if (existsSync(cjsConfigPath)) {
return (await import(cjsConfigPath)).default;
return (await import(cjsConfigPath)).default
}
if (existsSync(mjsConfigPath)) {
return (await import(mjsConfigPath)).default;
return (await import(mjsConfigPath)).default
}
return DEFAULT_CONFIG
}
return DEFAULT_CONFIG;
}
export async function validateConfig(
log: (message: string) => void,
config?: unknown,
): Promise<ResolvedConfig> {
const parsedConfig: ResolvedConfig = await configZod.parseAsync(config);
log(
colorize(
"gray",
`Install component to: ${path.join(process.cwd(), parsedConfig.paths.components)}`,
),
);
log(
colorize(
"gray",
`Install shared module to: ${path.join(process.cwd(), parsedConfig.paths.lib)}`,
),
);
log(colorize("gray", `Import shared with: ${parsedConfig.import.lib}`));
return parsedConfig;
export async function validateConfig(log: (message: string) => void, config?: unknown): Promise<ResolvedConfig> {
const parsedConfig: ResolvedConfig = await configZod.parseAsync(config)
log(colorize('gray', `Install component to: ${join(process.cwd(), parsedConfig.paths.components)}`))
log(colorize('gray', `Install shared module to: ${join(process.cwd(), parsedConfig.paths.lib)}`))
log(colorize('gray', `Import shared with: ${parsedConfig.import.lib}`))
return parsedConfig
}

62
packages/cli/src/helpers/path.ts
View File

@ -1,52 +1,18 @@
import { existsSync } from "node:fs";
import { readdir } from "node:fs/promises";
import path from "node:path";
import {ResolvedConfig} from '../const.js'
import {readdir} from 'node:fs/promises'
import {existsSync} from 'node:fs'
import {basename, dirname, extname, join} from 'node:path'
import type { RegistryComponent, ResolvedConfig } from "../const.js";
export async function getDirComponentRequiredFiles<
T extends { type: "dir" } & RegistryComponent,
>(componentObject: T, config: ResolvedConfig) {
const componentPath = path.join(
process.cwd(),
config.paths.components,
componentObject.name,
);
if (!existsSync(componentPath)) {
return componentObject.files;
export async function getComponentsInstalled(components: string[], config: ResolvedConfig) {
const componentPath = join(process.cwd(), config.paths.components)
if (existsSync(componentPath)) {
const dir = await readdir(componentPath)
return dir.reduce((prev, current) => (components.includes(current) ? [...prev, current] : prev), [] as string[])
} else {
return []
}
}
const dir = await readdir(componentPath);
return componentObject.files.filter((filename) => !dir.includes(filename));
}
export async function checkComponentInstalled(
component: RegistryComponent,
config: ResolvedConfig,
): Promise<boolean> {
const componentDirRoot = path.join(process.cwd(), config.paths.components);
if (!existsSync(componentDirRoot)) return false;
if (component.type === "file") {
const dir = await readdir(componentDirRoot);
return dir.includes(component.name);
}
const componentDir = path.join(componentDirRoot, component.name);
if (!existsSync(componentDir)) return false;
const dir = await readdir(componentDir);
return (
component.files.filter((filename) => !dir.includes(filename)).length === 0
);
}
export async function changeExtension(
_path: string,
extension: string,
): Promise<string> {
return path.join(
path.dirname(_path),
path.basename(_path, path.extname(_path)) + extension,
);
export async function changeExtension(path: string, extension: string): Promise<string> {
return join(dirname(path), basename(path, extname(path)) + extension)
}

66
packages/cli/src/helpers/registry.ts
View File

@ -1,49 +1,47 @@
import {
type Registry,
type RegistryComponent,
registryURL,
} from "../const.js";
import { safeFetch } from "./safe-fetcher.js";
import {REGISTRY_URL, Registry} from '../const.js'
export async function getRegistry(
branch?: string,
): Promise<{ message: string; ok: false } | { ok: true; registry: Registry }> {
const registryResponse = await safeFetch(registryURL(branch ?? "main"));
export async function getRegistry(): Promise<{ok: true; registry: Registry} | {ok: false; message: string}> {
const registryResponse = await fetch(REGISTRY_URL)
if (registryResponse.ok) {
const registryJson = (await registryResponse.response.json()) as Registry;
registryJson.base = registryJson.base.replace("{branch}", branch ?? "main");
return {
ok: true,
registry: registryJson,
};
registry: (await registryResponse.json()) as Registry,
}
} else {
return {
ok: false,
message: `Error while fetching registry: ${registryResponse.status} ${registryResponse.statusText}`,
}
}
}
return registryResponse;
export async function getAvailableComponentNames(registry: Registry): Promise<string[]> {
return Object.keys(registry.components)
}
export async function getComponentURL(
export async function getComponentURL(registry: Registry, componentName: string): Promise<string> {
return registry.base + registry.paths.components.replace('{componentName}', registry.components[componentName].name)
}
export async function getComponentRealname(
registry: Registry,
component: { type: "file" } & RegistryComponent,
componentName: keyof Registry['components'],
): Promise<string> {
return (
registry.base +
registry.paths.components.replace("{componentName}", component.name)
);
return registry.components[componentName].name
}
export async function getDirComponentURL(
export async function getComponentLibVersion(
registry: Registry,
component: { type: "dir" } & RegistryComponent,
files?: string[],
): Promise<[string, string][]> {
const base =
registry.base +
registry.paths.components.replace("{componentName}", component.name);
return (files ?? component.files).map((filename) => [
filename,
`${base}/${filename}`,
]);
componentName: keyof (typeof registry)['components'],
): Promise<{ok: boolean; libVersion: string}> {
const libVersion = registry.components[componentName].libVersion
if (!registry.lib.includes(libVersion)) {
return {ok: false, libVersion}
}
return {ok: true, libVersion}
}
export async function getLibURL(registry: Registry, version: string): Promise<string> {
return registry.base + registry.paths.lib.replace('{version}', version)
}

20
packages/cli/src/helpers/safe-fetcher.ts
View File

@ -1,20 +0,0 @@
export async function safeFetch(
url: string,
): Promise<
| { message: string; ok: false; response: Response }
| { ok: true; response: Response }
> {
const response = await fetch(url, { cache: "no-cache" });
if (response.ok) {
return {
ok: true,
response,
};
}
return {
message: `Error while fetching from ${response.url}: ${response.status} ${response.statusText}`,
ok: false,
response,
};
}

67
packages/cli/src/helpers/search.ts
View File

@ -1,69 +1,60 @@
export async function jaroWinkler(a: string, b: string): Promise<number> {
const p = 0.1;
const p = 0.1
if (a.length === 0 || b.length === 0) return 0;
if (a === b) return 1;
if (!a.length || !b.length) return 0.0
if (a === b) return 1.0
const range = Math.floor(Math.max(a.length, b.length) / 2) - 1;
let matches = 0;
const range = Math.floor(Math.max(a.length, b.length) / 2) - 1
let matches = 0
const aMatches = Array.from({ length: a.length });
const bMatches = Array.from({ length: b.length });
let aMatches = new Array(a.length)
let bMatches = new Array(b.length)
for (const [i, element] of Object.entries(a).map(
([index, element]) => [Number.parseInt(index, 10), element] as const,
)) {
const start = i >= range ? i - range : 0;
const end = i + range <= b.length - 1 ? i + range : b.length - 1;
for (let i = 0; i < a.length; i++) {
const start = i >= range ? i - range : 0
const end = i + range <= b.length - 1 ? i + range : b.length - 1
for (let j = start; j <= end; j++) {
if (bMatches[j] !== true && element === b[j]) {
++matches;
aMatches[i] = true;
bMatches[j] = true;
break;
if (bMatches[j] !== true && a[i] === b[j]) {
++matches
aMatches[i] = bMatches[j] = true
break
}
}
}
if (matches === 0) return 0;
if (matches === 0) return 0.0
let t = 0;
let t = 0
let point: number;
let point: number
for (point = 0; point < a.length; point++) if (aMatches[point]) break;
for (point = 0; point < a.length; point++) if (aMatches[point]) break
for (let i = point; i < a.length; i++)
if (aMatches[i]) {
let j: number;
let j
for (j = point; j < b.length; j++)
if (bMatches[j]) {
point = j + 1;
break;
point = j + 1
break
}
if (a[i] !== b[j]) ++t;
if (a[i] !== b[j]) ++t
}
t /= 2;
t = t / 2.0
const J =
(matches / a.length + matches / b.length + (matches - t) / matches) / 3;
return J + Math.min((p * t) / matches, 1) * (1 - J);
const J = (matches / a.length + matches / b.length + (matches - t) / matches) / 3
return J + Math.min((p * t) / matches, 1) * (1 - J)
}
export async function getSuggestion(
componentNames: string[],
input: string,
): Promise<string[]> {
export async function getSuggestion(componentNames: string[], input: string): Promise<string[]> {
const componentJw = await Promise.all(
componentNames.map(
async (name) => [name, await jaroWinkler(name, input)] as const,
),
);
componentNames.map(async (name) => [name, await jaroWinkler(name, input)] as const),
)
return componentJw
.filter(([_, score]) => score > 0)
.sort((a, b) => b[1] - a[1])
.map(([name]) => name);
.map(([name]) => name)
}

4
packages/cli/src/index.ts
View File

@ -1,2 +1,2 @@
export * from "./public.js";
export { run } from "@oclif/core";
export {run} from '@oclif/core'
export * from './public.js'

8
packages/cli/src/public.ts
View File

@ -1,9 +1,7 @@
import type { Config } from "./const.js";
import {Config} from './const.js'
function buildConfig(config: Config): Config {
return config;
return config
}
export { buildConfig };
export { Config } from "./const.js";
export {Config, buildConfig}

14
packages/react/.eslintrc.cjs Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

4
packages/react/.gitignore vendored
View File

@ -24,7 +24,3 @@ dist-ssr
*.sw?
*storybook.log
src
src/main.tsx
!src/tailwind.css

18
packages/react/404.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
const l = window.location;
l.replace(
l.origin +
l.pathname.split('/').slice(0, 1).join('/') + '/?/' +
l.pathname.slice(1).split('/').join('/').replace(/&/g, '~and~') +
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body>
</body>
</html>

35
packages/react/components/Button.tsx
View File

@ -1,9 +1,7 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import React from "react";
import { vcn, VariantProps, Slot, AsChild } from "@pswui-lib/shared@1.0.0";
const colors = {
disabled:
"disabled:brightness-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-50",
outline: {
focus: "dark:focus-visible:outline-white/20 focus-visible:outline-black/10",
},
@ -14,18 +12,21 @@ const colors = {
danger: "border-red-400 dark:border-red-600",
},
background: {
default: "bg-white dark:bg-black",
default:
"bg-white dark:bg-black hover:bg-neutral-200 dark:hover:bg-neutral-800",
ghost:
"bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
success: "bg-green-100 dark:bg-green-900",
warning: "bg-yellow-100 dark:bg-yellow-900",
danger: "bg-red-100 dark:bg-red-900",
success:
"bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800",
warning:
"bg-yellow-100 dark:bg-yellow-900 hover:bg-yellow-200 dark:hover:bg-yellow-800",
danger: "bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800",
},
underline: "decoration-current",
};
const [buttonVariants, resolveVariants] = vcn({
base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 hover:brightness-90 dark:hover:brightness-110 ${colors.outline.focus} ${colors.disabled} transition-all cursor-pointer`,
base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 ${colors.outline.focus} transition-all`,
variants: {
size: {
link: "p-0 text-base",
@ -108,22 +109,16 @@ export interface ButtonProps
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] = resolveVariants(props);
const { asChild, type, role, ...otherPropsExtracted } =
otherPropsCompressed;
const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
const Comp = asChild ? Slot : "button";
const compProps = {
...otherPropsExtracted,
className: buttonVariants(variantProps),
};
return (
<Comp
ref={ref}
type={type ?? "button"}
className={buttonVariants(variantProps)}
role={role ?? "button"}
{...otherPropsExtracted}
/>
);
return <Comp ref={ref} {...compProps} />;
},
);
Button.displayName = "Button";
export { Button };

19
packages/react/components/Checkbox.tsx
View File

@ -1,5 +1,5 @@
import { type VariantProps, vcn } from "@pswui-lib";
import React from "react";
import { VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
const checkboxColors = {
background: {
@ -18,10 +18,12 @@ const checkboxColors = {
disabledCheckedHover:
"has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-700",
},
checkmark:
"text-black dark:text-white has-[input[type=checkbox]:disabled]:text-neutral-400 dark:has-[input[type=checkbox]:disabled]:text-neutral-500",
};
const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
base: `inline-block rounded-md ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} ${checkboxColors.background.disabledChecked} ${checkboxColors.background.disabledCheckedHover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-150 ease-in-out`,
base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} ${checkboxColors.background.disabledChecked} ${checkboxColors.background.disabledCheckedHover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`,
variants: {
size: {
base: "size-[1em] p-0 [&>svg]:size-[1em]",
@ -90,11 +92,22 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
}
}}
/>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
className={`${checked ? "opacity-100" : "opacity-0"} transition-opacity duration-75 ease-in-out`}
>
<path
fill="currentColor"
d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
></path>
</svg>
</label>
</>
);
},
);
Checkbox.displayName = "Checkbox";
export { Checkbox };

324
packages/react/components/Dialog/Component.tsx → packages/react/components/Dialog.tsx
View File

@ -1,21 +1,32 @@
import {
Slot,
type VariantProps,
useAnimatedMount,
useDocument,
vcn,
} from "@pswui-lib";
import React, { type ReactNode, useId, useRef, useState } from "react";
import React, { Dispatch, SetStateAction, useState } from "react";
import { Slot, VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
import ReactDOM from "react-dom";
import {
DialogContext,
type IDialogContext,
InnerDialogContext,
/**
* =========================
* DialogContext
* =========================
*/
interface DialogContext {
opened: boolean;
}
const initialDialogContext: DialogContext = { opened: false };
const DialogContext = React.createContext<
[DialogContext, Dispatch<SetStateAction<DialogContext>>]
>([
initialDialogContext,
useDialogContext,
useInnerDialogContext,
} from "./Context";
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using DialogContext outside of a provider.",
);
}
},
]);
const useDialogContext = () => React.useContext(DialogContext);
/**
* =========================
@ -28,10 +39,7 @@ interface DialogRootProps {
}
const DialogRoot = ({ children }: DialogRootProps) => {
const state = useState<IDialogContext>({
...initialDialogContext,
ids: { dialog: useId(), title: useId(), description: useId() },
});
const state = useState<DialogContext>(initialDialogContext);
return (
<DialogContext.Provider value={state}>{children}</DialogContext.Provider>
);
@ -48,17 +56,15 @@ interface DialogTriggerProps {
}
const DialogTrigger = ({ children }: DialogTriggerProps) => {
const [{ ids }, setState] = useDialogContext();
const [_, setState] = useDialogContext();
const onClick = () => setState((p) => ({ ...p, opened: true }));
return (
<Slot
onClick={onClick}
aria-controls={ids.dialog}
>
{children}
</Slot>
);
const slotProps = {
onClick,
children,
};
return <Slot {...slotProps} />;
};
/**
@ -68,15 +74,33 @@ const DialogTrigger = ({ children }: DialogTriggerProps) => {
*/
const [dialogOverlayVariant, resolveDialogOverlayVariant] = vcn({
base: "fixed inset-0 z-50 w-full h-screen overflow-y-auto max-w-screen transition-all duration-300 backdrop-blur-md backdrop-brightness-75 [&>div]:p-6",
base: "fixed inset-0 z-50 w-full h-full max-w-screen transition-all duration-300 flex flex-col justify-center items-center",
variants: {
opened: {
true: "pointer-events-auto opacity-100",
false: "pointer-events-none opacity-0",
},
blur: {
sm: "backdrop-blur-sm",
md: "backdrop-blur-md",
lg: "backdrop-blur-lg",
},
darken: {
sm: "backdrop-brightness-90",
md: "backdrop-brightness-75",
lg: "backdrop-brightness-50",
},
padding: {
sm: "p-4",
md: "p-6",
lg: "p-8",
},
},
defaults: {
opened: false,
blur: "md",
darken: "md",
padding: "md",
},
});
@ -88,36 +112,20 @@ interface DialogOverlay
const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
(props, ref) => {
const [{ opened, ids }, setContext] = useDialogContext();
const [variantProps, otherPropsCompressed] =
resolveDialogOverlayVariant(props);
const [{ opened }, setContext] = useDialogContext();
const [variantProps, otherPropsCompressed] = resolveDialogOverlayVariant({
...props,
opened,
});
const { children, closeOnClick, onClick, ...otherPropsExtracted } =
otherPropsCompressed;
const internalRef = useRef<HTMLDivElement | null>(null);
const { isMounted, isRendered } = useAnimatedMount(opened, internalRef);
const document = useDocument();
if (!document) return null;
return isMounted
? ReactDOM.createPortal(
return (
<>
{ReactDOM.createPortal(
<div
{...otherPropsExtracted}
id={ids.dialog}
ref={(el) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
className={dialogOverlayVariant({
...variantProps,
opened: isRendered,
})}
ref={ref}
className={dialogOverlayVariant(variantProps)}
onClick={(e) => {
if (closeOnClick) {
setContext((p) => ({ ...p, opened: false }));
@ -125,23 +133,14 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
onClick?.(e);
}}
>
{/* Layer for overflow positioning */}
<div
className={
"w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
}
>
<InnerDialogContext.Provider value={{ isMounted, isRendered }}>
{children}
</InnerDialogContext.Provider>
</div>
</div>,
document.body,
)
: null;
)}
</>
);
},
);
DialogOverlay.displayName = "DialogOverlay";
/**
* =========================
@ -150,51 +149,69 @@ DialogOverlay.displayName = "DialogOverlay";
*/
const [dialogContentVariant, resolveDialogContentVariant] = vcn({
base: "transition-transform duration-300 bg-white dark:bg-black border border-neutral-200 dark:border-neutral-800 p-6 w-full max-w-xl rounded-md flex flex-col justify-start items-start gap-6",
base: "transition-transform duration-300 bg-white dark:bg-black border border-neutral-200 dark:border-neutral-800",
variants: {
opened: {
true: "scale-100",
false: "scale-50",
},
size: {
fit: "w-fit",
fullSm: "w-full max-w-sm",
fullMd: "w-full max-w-md",
fullLg: "w-full max-w-lg",
fullXl: "w-full max-w-xl",
full2xl: "w-full max-w-2xl",
},
rounded: {
sm: "rounded-sm",
md: "rounded-md",
lg: "rounded-lg",
xl: "rounded-xl",
},
padding: {
sm: "p-4",
md: "p-6",
lg: "p-8",
},
gap: {
sm: "space-y-4",
md: "space-y-6",
lg: "space-y-8",
},
},
defaults: {
opened: false,
size: "fit",
rounded: "md",
padding: "md",
gap: "md",
},
});
interface DialogContentProps
interface DialogContent
extends React.ComponentPropsWithoutRef<"div">,
Omit<VariantProps<typeof dialogContentVariant>, "opened"> {}
const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
const DialogContent = React.forwardRef<HTMLDivElement, DialogContent>(
(props, ref) => {
const [{ ids }] = useDialogContext();
const [variantProps, otherPropsCompressed] =
resolveDialogContentVariant(props);
const { isRendered } = useInnerDialogContext();
const { children, onClick, ...otherPropsExtracted } = otherPropsCompressed;
const [{ opened }] = useDialogContext();
const [variantProps, otherPropsCompressed] = resolveDialogContentVariant({
...props,
opened,
});
const { children, ...otherPropsExtracted } = otherPropsCompressed;
return (
<div
{...otherPropsExtracted}
ref={ref}
role="dialog"
aria-labelledby={ids.title}
aria-describedby={ids.description}
className={dialogContentVariant({
...variantProps,
opened: isRendered,
})}
onClick={(e) => {
e.stopPropagation();
onClick?.(e);
}}
className={dialogContentVariant(variantProps)}
>
{children}
</div>
);
},
);
DialogContent.displayName = "DialogContent";
/**
* =========================
@ -225,9 +242,17 @@ const DialogClose = ({ children }: DialogCloseProps) => {
*/
const [dialogHeaderVariant, resolveDialogHeaderVariant] = vcn({
base: "flex flex-col gap-2",
variants: {},
defaults: {},
base: "flex flex-col",
variants: {
gap: {
sm: "gap-2",
md: "gap-4",
lg: "gap-6",
},
},
defaults: {
gap: "sm",
},
});
interface DialogHeaderProps
@ -251,8 +276,6 @@ const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
},
);
DialogHeader.displayName = "DialogHeader";
/**
* =========================
* DialogTitle / DialogSubtitle
@ -260,69 +283,91 @@ DialogHeader.displayName = "DialogHeader";
*/
const [dialogTitleVariant, resolveDialogTitleVariant] = vcn({
base: "text-xl font-bold",
variants: {},
defaults: {},
variants: {
size: {
sm: "text-lg",
md: "text-xl",
lg: "text-2xl",
},
weight: {
sm: "font-medium",
md: "font-semibold",
lg: "font-bold",
},
},
defaults: {
size: "md",
weight: "lg",
},
});
interface DialogTitleProps
extends React.ComponentPropsWithoutRef<"h1">,
VariantProps<typeof dialogTitleVariant> {}
const [dialogDescriptionVariant, resolveDialogDescriptionVariant] = vcn({
base: "text-sm opacity-60 font-normal",
variants: {},
defaults: {},
const [dialogSubtitleVariant, resolveDialogSubtitleVariant] = vcn({
variants: {
size: {
sm: "text-sm",
md: "text-base",
lg: "text-lg",
},
opacity: {
sm: "opacity-60",
md: "opacity-70",
lg: "opacity-80",
},
weight: {
sm: "font-light",
md: "font-normal",
lg: "font-medium",
},
},
defaults: {
size: "sm",
opacity: "sm",
weight: "md",
},
});
interface DialogDescriptionProps
interface DialogSubtitleProps
extends React.ComponentPropsWithoutRef<"h2">,
VariantProps<typeof dialogDescriptionVariant> {}
VariantProps<typeof dialogSubtitleVariant> {}
const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveDialogTitleVariant(props);
const { children, ...otherPropsExtracted } = otherPropsCompressed;
const [{ ids }] = useDialogContext();
return (
<h1
{...otherPropsExtracted}
ref={ref}
className={dialogTitleVariant(variantProps)}
id={ids.title}
>
{children}
</h1>
);
},
);
DialogTitle.displayName = "DialogTitle";
const DialogDescription = React.forwardRef<
const DialogSubtitle = React.forwardRef<
HTMLHeadingElement,
DialogDescriptionProps
DialogSubtitleProps
>((props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveDialogDescriptionVariant(props);
resolveDialogSubtitleVariant(props);
const { children, ...otherPropsExtracted } = otherPropsCompressed;
const [{ ids }] = useDialogContext();
return (
<h2
{...otherPropsExtracted}
ref={ref}
className={dialogDescriptionVariant(variantProps)}
id={ids.description}
className={dialogSubtitleVariant(variantProps)}
>
{children}
</h2>
);
});
DialogDescription.displayName = "DialogDescription";
// renamed DialogSubtitle -> DialogDescription
// keep DialogSubtitle for backward compatibility
const DialogSubtitle = DialogDescription;
/**
* =========================
@ -331,9 +376,17 @@ const DialogSubtitle = DialogDescription;
*/
const [dialogFooterVariant, resolveDialogFooterVariant] = vcn({
base: "flex w-full flex-col items-end sm:flex-row sm:items-center sm:justify-end gap-2",
variants: {},
defaults: {},
base: "flex flex-col items-end sm:flex-row sm:items-center sm:justify-end",
variants: {
gap: {
sm: "gap-2",
md: "gap-4",
lg: "gap-6",
},
},
defaults: {
gap: "md",
},
});
interface DialogFooterProps
@ -346,46 +399,19 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
resolveDialogFooterVariant(props);
const { children, ...otherPropsExtracted } = otherPropsCompressed;
return (
<footer
<div
{...otherPropsExtracted}
ref={ref}
className={dialogFooterVariant(variantProps)}
>
{children}
</footer>
</div>
);
},
);
DialogFooter.displayName = "DialogFooter";
interface DialogControllers {
context: IDialogContext;
setContext: React.Dispatch<React.SetStateAction<IDialogContext>>;
close: () => void;
}
interface DialogControllerProps {
children: (controllers: DialogControllers) => ReactNode;
}
const DialogController = (props: DialogControllerProps) => {
return (
<DialogContext.Consumer>
{([context, setContext]) =>
props.children({
context,
setContext,
close() {
setContext((p) => ({ ...p, opened: false }));
},
})
}
</DialogContext.Consumer>
);
};
export {
useDialogContext,
DialogRoot,
DialogTrigger,
DialogOverlay,
@ -394,7 +420,5 @@ export {
DialogHeader,
DialogTitle,
DialogSubtitle,
DialogDescription,
DialogFooter,
DialogController,
};

60
packages/react/components/Dialog/Context.ts
View File

@ -1,60 +0,0 @@
import {
type Dispatch,
type SetStateAction,
createContext,
useContext,
} from "react";
/**
* =========================
* DialogContext
* =========================
*/
export interface IDialogContext {
opened: boolean;
ids: {
dialog: string;
title: string;
description: string;
};
}
export const initialDialogContext: IDialogContext = {
opened: false,
ids: { title: "", dialog: "", description: "" },
};
export const DialogContext = createContext<
[IDialogContext, Dispatch<SetStateAction<IDialogContext>>]
>([
initialDialogContext,
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using DialogContext outside of a provider.",
);
}
},
]);
export const useDialogContext = () => useContext(DialogContext);
/**
* ===================
* InnerDialogContext
* ===================
*/
export interface IInnerDialogContext {
isMounted: boolean;
isRendered: boolean;
}
export const initialInnerDialogContext: IInnerDialogContext = {
isMounted: false,
isRendered: false,
};
export const InnerDialogContext = createContext<IInnerDialogContext>(
initialInnerDialogContext,
);
export const useInnerDialogContext = () => useContext(InnerDialogContext);

2
packages/react/components/Dialog/index.ts
View File

@ -1,2 +0,0 @@
export * from "./Component";
export { useDialogContext } from "./Context";

142
packages/react/components/Drawer.tsx
View File

@ -1,20 +1,13 @@
import {
type AsChild,
Slot,
type VariantProps,
useAnimatedMount,
useDocument,
vcn,
} from "@pswui-lib";
import React, {
type ComponentPropsWithoutRef,
type TouchEvent as ReactTouchEvent,
ComponentPropsWithoutRef,
TouchEvent as ReactTouchEvent,
forwardRef,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
import { createPortal } from "react-dom";
interface IDrawerContext {
@ -22,8 +15,6 @@ interface IDrawerContext {
closeThreshold: number;
movePercentage: number;
isDragging: boolean;
isMounted: boolean;
isRendered: boolean;
leaveWhileDragging: boolean;
}
const DrawerContextInitial: IDrawerContext = {
@ -31,8 +22,6 @@ const DrawerContextInitial: IDrawerContext = {
closeThreshold: 0.3,
movePercentage: 0,
isDragging: false,
isMounted: false,
isRendered: false,
leaveWhileDragging: false,
};
const DrawerContext = React.createContext<
@ -60,15 +49,14 @@ const DrawerRoot = ({ children, closeThreshold, opened }: DrawerRootProps) => {
opened: opened ?? DrawerContextInitial.opened,
closeThreshold: closeThreshold ?? DrawerContextInitial.closeThreshold,
});
const setState = state[1];
useEffect(() => {
setState((prev) => ({
state[1]((prev) => ({
...prev,
opened: opened ?? prev.opened,
closeThreshold: closeThreshold ?? prev.closeThreshold,
}));
}, [closeThreshold, opened, setState]);
}, [closeThreshold, opened]);
return (
<DrawerContext.Provider value={state}>{children}</DrawerContext.Provider>
@ -89,7 +77,7 @@ const [drawerOverlayVariant, resolveDrawerOverlayVariantProps] = vcn({
base: "fixed inset-0 transition-[backdrop-filter] duration-75",
variants: {
opened: {
true: "pointer-events-auto select-auto touch-none", // touch-none to prevent outside scrolling
true: "pointer-events-auto select-auto",
false: "pointer-events-none select-none",
},
},
@ -107,14 +95,8 @@ interface DrawerOverlayProps
const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
(props, ref) => {
const internalRef = useRef<HTMLDivElement | null>(null);
const [state, setState] = useContext(DrawerContext);
const { isMounted, isRendered } = useAnimatedMount(
state.isDragging ? true : state.opened,
internalRef,
);
const [variantProps, restPropsCompressed] =
resolveDrawerOverlayVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed;
@ -136,21 +118,12 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
: 1
})`;
const document = useDocument();
if (!document) return null;
return (
<>
<DrawerContext.Provider
value={[{ ...state, isMounted, isRendered }, setState]}
>
{isMounted
? createPortal(
return createPortal(
<Comp
{...restPropsExtracted}
className={drawerOverlayVariant({
...variantProps,
opened: isRendered,
opened: state.isDragging ? true : state.opened,
})}
onClick={onOutsideClick}
style={{
@ -158,24 +131,12 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
WebkitBackdropFilter: backdropFilter,
transitionDuration: state.isDragging ? "0s" : undefined,
}}
ref={(el: HTMLDivElement) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
ref={ref}
/>,
document.body,
)
: null}
</DrawerContext.Provider>
</>
);
},
);
DrawerOverlay.displayName = "DrawerOverlay";
const drawerContentColors = {
background: "bg-white dark:bg-black",
@ -183,55 +144,28 @@ const drawerContentColors = {
};
const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({
base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8 overflow-auto`,
base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8`,
variants: {
position: {
top: "top-0 w-full max-w-screen rounded-t-lg border-b-2",
bottom: "bottom-0 w-full max-w-screen rounded-b-lg border-t-2",
left: "left-0 h-screen rounded-l-lg border-r-2",
right: "right-0 h-screen rounded-r-lg border-l-2",
},
maxSize: {
sm: "[&.left-0]:max-w-sm [&.right-0]:max-w-sm",
md: "[&.left-0]:max-w-md [&.right-0]:max-w-md",
lg: "[&.left-0]:max-w-lg [&.right-0]:max-w-lg",
xl: "[&.left-0]:max-w-xl [&.right-0]:max-w-xl",
top: "top-0 inset-x-0 w-full max-w-screen rounded-t-lg border-b-2",
bottom: "bottom-0 inset-x-0 w-full max-w-screen rounded-b-lg border-t-2",
left: "left-0 inset-y-0 h-screen rounded-l-lg border-r-2",
right: "right-0 inset-y-0 h-screen rounded-r-lg border-l-2",
},
opened: {
true: "",
true: "touch-none",
false:
"[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full",
},
internal: {
true: "relative",
false: "fixed",
},
},
defaults: {
position: "left",
opened: false,
maxSize: "sm",
internal: false,
},
dynamics: [
({ position, internal }) => {
if (!internal) {
if (["top", "bottom"].includes(position)) {
return "inset-x-0";
}
return "inset-y-0";
}
return "w-fit";
},
],
});
interface DrawerContentProps
extends Omit<
VariantProps<typeof drawerContentVariant>,
"opened" | "internal"
>,
extends Omit<VariantProps<typeof drawerContentVariant>, "opened">,
AsChild,
ComponentPropsWithoutRef<"div"> {}
@ -366,15 +300,15 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
window.removeEventListener("touchmove", onMouseMove);
window.removeEventListener("touchend", onMouseUp);
};
}, [state, setState, dragState, position]);
}, [state, dragState]);
return (
<div
className={drawerContentVariant({
...variantProps,
opened: state.isRendered,
opened: true,
className: dragState.isDragging
? "transition-[width] duration-0"
? "transition-[width_0ms]"
: variantProps.className,
})}
style={
@ -386,7 +320,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
0) +
(position === "top" ? dragState.delta : -dragState.delta),
padding: 0,
[`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
}
: {
width:
@ -394,7 +327,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
0) +
(position === "left" ? dragState.delta : -dragState.delta),
padding: 0,
[`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
}
: { width: 0, height: 0, padding: 0 }
}
@ -403,20 +335,18 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
{...restPropsExtracted}
className={drawerContentVariant({
...variantProps,
opened: state.isRendered,
internal: true,
opened: state.opened,
})}
style={{
transform:
dragState.isDragging &&
((["top", "left"].includes(position) && dragState.delta < 0) ||
(["bottom", "right"].includes(position) && dragState.delta > 0))
? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${dragState.delta}px)`
transform: dragState.isDragging
? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${
dragState.delta
}px)`
: undefined,
transitionDuration: dragState.isDragging ? "0s" : undefined,
userSelect: dragState.isDragging ? "none" : undefined,
}}
ref={(el: HTMLDivElement | null) => {
ref={(el) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
@ -443,7 +373,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
);
},
);
DrawerContent.displayName = "DrawerContent";
const DrawerClose = forwardRef<
HTMLButtonElement,
@ -458,7 +387,6 @@ const DrawerClose = forwardRef<
/>
);
});
DrawerClose.displayName = "DrawerClose";
const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({
base: "flex flex-col gap-2",
@ -476,11 +404,8 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
const [variantProps, restPropsCompressed] =
resolveDrawerHeaderVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed;
const Comp = asChild ? Slot : "div";
return (
<Comp
<div
{...restPropsExtracted}
className={drawerHeaderVariant(variantProps)}
ref={ref}
@ -488,10 +413,9 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
);
},
);
DrawerHeader.displayName = "DrawerHeader";
const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
base: "grow",
base: "flex-grow",
variants: {},
defaults: {},
});
@ -505,18 +429,14 @@ const DrawerBody = forwardRef<HTMLDivElement, DrawerBodyProps>((props, ref) => {
const [variantProps, restPropsCompressed] =
resolveDrawerBodyVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed;
const Comp = asChild ? Slot : "div";
return (
<Comp
<div
{...restPropsExtracted}
className={drawerBodyVariant(variantProps)}
ref={ref}
/>
);
});
DrawerBody.displayName = "DrawerBody";
const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({
base: "flex flex-row justify-end gap-2",
@ -534,11 +454,8 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
const [variantProps, restPropsCompressed] =
resolveDrawerFooterVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed;
const Comp = asChild ? Slot : "div";
return (
<Comp
<div
{...restPropsExtracted}
className={drawerFooterVariant(variantProps)}
ref={ref}
@ -546,7 +463,6 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
);
},
);
DrawerFooter.displayName = "DrawerFooter";
export {
DrawerRoot,

183
packages/react/components/Form.tsx
View File

@ -1,183 +0,0 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import {
type ComponentPropsWithoutRef,
createContext,
forwardRef,
useContext,
useEffect,
useRef,
} from "react";
/**
Form Item Context
**/
interface IFormItemContext {
invalid?: string | null | undefined;
}
const FormItemContext = createContext<IFormItemContext>({});
/**
FormItem
**/
const [formItemVariant, resolveFormItemVariantProps] = vcn({
base: "flex flex-col gap-2 items-start w-full",
variants: {},
defaults: {},
});
interface FormItemProps
extends VariantProps<typeof formItemVariant>,
AsChild,
ComponentPropsWithoutRef<"label"> {
invalid?: string | null | undefined;
}
const FormItem = forwardRef<HTMLLabelElement, FormItemProps>((props, ref) => {
const [variantProps, restPropsCompressed] =
resolveFormItemVariantProps(props);
const { asChild, children, invalid, ...restPropsExtracted } =
restPropsCompressed;
const innerRef = useRef<HTMLLabelElement | null>(null);
useEffect(() => {
const invalidAsString = invalid ? invalid : "";
const input = innerRef.current?.querySelector?.("input");
if (!input) return;
input.setCustomValidity(invalidAsString);
}, [invalid]);
const Comp = asChild ? Slot : "label";
return (
<FormItemContext.Provider value={{ invalid }}>
<Comp
ref={(el: HTMLLabelElement | null) => {
innerRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
className={formItemVariant(variantProps)}
{...restPropsExtracted}
>
{children}
</Comp>
</FormItemContext.Provider>
);
});
FormItem.displayName = "FormItem";
/**
FormLabel
**/
const [formLabelVariant, resolveFormLabelVariantProps] = vcn({
base: "text-sm font-bold",
variants: {},
defaults: {},
});
interface FormLabelProps
extends VariantProps<typeof formLabelVariant>,
AsChild,
ComponentPropsWithoutRef<"span"> {}
const FormLabel = forwardRef<HTMLSpanElement, FormLabelProps>((props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveFormLabelVariantProps(props);
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
const Comp = asChild ? Slot : "span";
return (
<Comp
ref={ref}
className={formLabelVariant(variantProps)}
{...otherPropsExtracted}
>
{children}
</Comp>
);
});
FormLabel.displayName = "FormLabel";
/**
FormHelper
**/
const [formHelperVariant, resolveFormHelperVariantProps] = vcn({
base: "opacity-75 text-sm font-light",
variants: {},
defaults: {},
});
interface FormHelperProps
extends VariantProps<typeof formHelperVariant>,
AsChild,
ComponentPropsWithoutRef<"span"> {
hiddenOnInvalid?: boolean;
}
const FormHelper = forwardRef<HTMLSpanElement, FormHelperProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveFormHelperVariantProps(props);
const { asChild, children, hiddenOnInvalid, ...otherPropsExtracted } =
otherPropsCompressed;
const item = useContext(FormItemContext);
if (item.invalid && hiddenOnInvalid) return null;
const Comp = asChild ? Slot : "span";
return (
<Comp
ref={ref}
className={formHelperVariant(variantProps)}
{...otherPropsExtracted}
>
{children}
</Comp>
);
},
);
FormHelper.displayName = "FormHelper";
/**
FormError
**/
const [formErrorVariant, resolveFormErrorVariantProps] = vcn({
base: "text-sm text-red-500",
variants: {},
defaults: {},
});
interface FormErrorProps
extends VariantProps<typeof formErrorVariant>,
AsChild,
Omit<ComponentPropsWithoutRef<"span">, "children"> {}
const FormError = forwardRef<HTMLSpanElement, FormErrorProps>((props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveFormErrorVariantProps(props);
const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
const item = useContext(FormItemContext);
const Comp = asChild ? Slot : "span";
return item.invalid ? (
<Comp
ref={ref}
className={formErrorVariant(variantProps)}
{...otherPropsExtracted}
>
{item.invalid}
</Comp>
) : null;
});
FormError.displayName = "FormError";
export { FormItem, FormLabel, FormHelper, FormError };

32
packages/react/components/Input.tsx
View File

@ -1,38 +1,37 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import React from "react";
import { VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
const inputColors = {
background: {
default: "bg-neutral-50 dark:bg-neutral-900",
hover:
"hover:bg-neutral-100 dark:hover:bg-neutral-800 has-[input:hover]:bg-neutral-100 dark:has-[input:hover]:bg-neutral-800",
hover: "hover:bg-neutral-100 dark:hover:bg-neutral-800",
invalid:
"invalid:bg-red-100 dark:invalid:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
"invalid:bg-red-100 invalid:dark:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
invalidHover:
"hover:invalid:bg-red-200 dark:hover:invalid:bg-red-800 has-[input:invalid:hover]:bg-red-200 dark:has-[input:invalid:hover]:bg-red-800",
},
border: {
default: "border-neutral-400 dark:border-neutral-600",
invalid:
"invalid:border-red-400 dark:invalid:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
"invalid:border-red-400 invalid:dark:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
},
ring: {
default: "ring-transparent focus-within:ring-current",
invalid:
"invalid:focus-within:ring-red-400 dark:invalid:focus-within:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
"invalid:focus-within:ring-red-400 invalid:focus-within:dark:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
},
};
const [inputVariant, resolveInputVariantProps] = vcn({
base: `rounded-md p-2 border ring-1 outline-hidden transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex`,
base: `rounded-md p-2 border ring-1 outline-none transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex [&:has(input)]:w-fit`,
variants: {
unstyled: {
true: "bg-transparent border-none p-0 ring-0 hover:bg-transparent invalid:hover:bg-transparent invalid:focus-within:bg-transparent invalid:focus-within:ring-0",
false: "",
},
full: {
true: "[&:has(input)]:w-full w-full",
false: "[&:has(input)]:w-fit w-fit",
true: "w-full",
false: "w-fit",
},
},
defaults: {
@ -43,8 +42,7 @@ const [inputVariant, resolveInputVariantProps] = vcn({
interface InputFrameProps
extends VariantProps<typeof inputVariant>,
React.ComponentPropsWithoutRef<"label">,
AsChild {
React.ComponentPropsWithoutRef<"label"> {
children?: React.ReactNode;
}
@ -52,22 +50,19 @@ const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveInputVariantProps(props);
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
const Comp = asChild ? Slot : "label";
const { children, ...otherPropsExtracted } = otherPropsCompressed;
return (
<Comp
<label
ref={ref}
className={`group/input-frame ${inputVariant(variantProps)}`}
{...otherPropsExtracted}
>
{children}
</Comp>
</label>
);
},
);
InputFrame.displayName = "InputFrame";
interface InputProps
extends VariantProps<typeof inputVariant>,
@ -97,7 +92,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const innerRef = React.useRef<HTMLInputElement | null>(null);
React.useEffect(() => {
if (innerRef?.current) {
if (innerRef && innerRef.current) {
innerRef.current.setCustomValidity(invalid ?? "");
}
}, [invalid]);
@ -118,6 +113,5 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
/>
);
});
Input.displayName = "Input";
export { InputFrame, Input };

3
packages/react/components/Label.tsx
View File

@ -1,5 +1,5 @@
import { type VariantProps, vcn } from "@pswui-lib";
import React from "react";
import { VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
const [labelVariant, resolveLabelVariantProps] = vcn({
base: "has-[input[disabled]]:brightness-75 has-[input[disabled]]:cursor-not-allowed has-[input:invalid]:text-red-500",
@ -29,6 +29,5 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
/>
);
});
Label.displayName = "Label";
export { Label };

174
packages/react/components/Popover.tsx
View File

@ -1,8 +1,7 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import React, { useContext, useEffect, useRef } from "react";
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
interface IPopoverContext {
controlled: boolean;
opened: boolean;
}
@ -11,7 +10,6 @@ const PopoverContext = React.createContext<
>([
{
opened: false,
controlled: false,
},
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
@ -28,23 +26,14 @@ interface PopoverProps extends AsChild {
}
const Popover = ({ children, opened, asChild }: PopoverProps) => {
const [state, setState] = React.useState<IPopoverContext>({
const state = React.useState<IPopoverContext>({
opened: opened ?? false,
controlled: opened !== undefined,
});
useEffect(() => {
setState((p) => ({
...p,
controlled: opened !== undefined,
opened: opened !== undefined ? opened : p.opened,
}));
}, [opened]);
const Comp = asChild ? Slot : "div";
return (
<PopoverContext.Provider value={[state, setState]}>
<PopoverContext.Provider value={state}>
<Comp className="relative">{children}</Comp>
</PopoverContext.Provider>
);
@ -65,25 +54,26 @@ const popoverColors = {
};
const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
base: `absolute transition-all duration-150 border rounded-lg p-0.5 z-10 *:w-full ${popoverColors.background} ${popoverColors.border}`,
base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`,
variants: {
direction: {
row: "",
col: "",
},
anchor: {
start: "",
middle: "",
end: "",
},
align: {
start: "",
middle: "",
end: "",
},
position: {
start: "",
end: "",
topLeft:
"bottom-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-bottom-right",
topCenter:
"bottom-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-bottom-center",
topRight:
"bottom-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-bottom-left",
middleLeft: "top-1/2 translate-y-1/2 right-full origin-right",
middleCenter:
"top-1/2 translate-y-1/2 left-1/2 -translate-x-1/2 origin-center",
middleRight:
"top-1/2 translate-y-1/2 left-[calc(100%+var(--popover-offset))] origin-left",
bottomLeft:
"top-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-top-right",
bottomCenter:
"top-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-top-center",
bottomRight:
"top-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-top-left",
},
offset: {
sm: "[--popover-offset:2px]",
@ -91,104 +81,15 @@ const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
lg: "[--popover-offset:8px]",
},
opened: {
true: "opacity-1 scale-100 pointer-events-auto select-auto touch-auto",
false: "opacity-0 scale-75 pointer-events-none select-none touch-none",
true: "opacity-1 scale-100",
false: "opacity-0 scale-75",
},
},
defaults: {
direction: "col",
anchor: "middle",
align: "middle",
position: "end",
anchor: "bottomCenter",
opened: false,
offset: "md",
},
dynamics: [
function originClass({ direction, anchor, position }) {
switch (`${direction} ${position} ${anchor}` as const) {
// left
case "row start start":
return "origin-top-right";
case "row start middle":
return "origin-right";
case "row start end":
return "origin-bottom-right";
// right
case "row end start":
return "origin-top-left";
case "row end middle":
return "origin-left";
case "row end end":
return "origin-bottom-left";
// top
case "col start start":
return "origin-bottom-left";
case "col start middle":
return "origin-bottom";
case "col start end":
return "origin-bottom-right";
// bottom
case "col end start":
return "origin-top-left";
case "col end middle":
return "origin-top";
case "col end end":
return "origin-top-right";
}
},
function basePositionClass({ position, direction }) {
switch (`${direction} ${position}` as const) {
case "col start":
return "bottom-[calc(100%+var(--popover-offset))]";
case "col end":
return "top-[calc(100%+var(--popover-offset))]";
case "row start":
return "right-[calc(100%+var(--popover-offset))]";
case "row end":
return "left-[calc(100%+var(--popover-offset))]";
}
},
function directionPositionClass({ direction, anchor, align }) {
switch (`${direction} ${anchor} ${align}` as const) {
case "col start start":
return "left-0";
case "col start middle":
return "left-1/2";
case "col start end":
return "left-full";
case "col middle start":
return "left-0 -translate-x-1/2";
case "col middle middle":
return "left-1/2 -translate-x-1/2";
case "col middle end":
return "right-0 translate-x-1/2";
case "col end start":
return "right-full";
case "col end middle":
return "right-1/2";
case "col end end":
return "right-0";
case "row start start":
return "top-0";
case "row start middle":
return "top-1/2";
case "row start end":
return "top-full";
case "row middle start":
return "top-0 -translate-y-1/2";
case "row middle middle":
return "top-1/2 -translate-y-1/2";
case "row middle end":
return "bottom-0 translate-y-1/2";
case "row end start":
return "bottom-full";
case "row end middle":
return "bottom-1/2";
case "row end end":
return "bottom-0";
}
},
],
});
interface PopoverContentProps
@ -200,50 +101,39 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] =
resolvePopoverContentVariantProps(props);
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
const { children, ...otherPropsExtracted } = otherPropsCompressed;
const [state, setState] = useContext(PopoverContext);
const internalRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
function handleOutsideClick(e: MouseEvent) {
if (
internalRef.current &&
!internalRef.current.contains(e.target as Node | null)
) {
function handleOutsideClick(e: any) {
if (internalRef.current && !internalRef.current.contains(e.target)) {
setState((prev) => ({ ...prev, opened: false }));
}
}
!state.controlled &&
document.addEventListener("mousedown", handleOutsideClick);
return () => {
document.removeEventListener("mousedown", handleOutsideClick);
};
}, [state.controlled, setState]);
const Comp = asChild ? Slot : "div";
}, [internalRef, setState]);
return (
<Comp
<div
{...otherPropsExtracted}
className={popoverContentVariant({
...variantProps,
opened: state.opened,
})}
ref={(el: HTMLDivElement) => {
ref={(el) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
typeof ref === "function" ? ref(el) : ref && (ref.current = el);
}}
>
{children}
</Comp>
</div>
);
},
);
PopoverContent.displayName = "PopoverContent";
export { Popover, PopoverTrigger, PopoverContent };

3
packages/react/components/Switch.tsx
View File

@ -1,5 +1,5 @@
import { type VariantProps, vcn } from "@pswui-lib";
import React from "react";
import { VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
const switchColors = {
background: {
@ -80,6 +80,5 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
</label>
);
});
Switch.displayName = "Switch";
export { Switch };

120
packages/react/components/Tabs/Component.tsx → packages/react/components/Tabs.tsx
View File

@ -1,7 +1,30 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
import React from "react";
import { type Tab, TabContext, type TabContextBody } from "./Context";
interface Tab {
name: string;
}
interface TabContextBody {
tabs: Tab[];
active: [number, string] /* index, name */;
}
const TabContext = React.createContext<
[TabContextBody, React.Dispatch<React.SetStateAction<TabContextBody>>]
>([
{
tabs: [],
active: [0, ""],
},
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using TabContext outside of provider.",
);
}
},
]);
interface TabProviderProps {
defaultName: string;
@ -17,6 +40,77 @@ const TabProvider = ({ defaultName, children }: TabProviderProps) => {
return <TabContext.Provider value={state}>{children}</TabContext.Provider>;
};
/**
* Provides current state for tab, using context.
* Also provides functions to control state.
*/
const useTabState = () => {
const [state, setState] = React.useContext(TabContext);
function getActiveTab() {
return state.active;
}
function setActiveTab(name: string): void;
function setActiveTab(index: number): void;
function setActiveTab(param: string | number) {
if (typeof param === "number") {
if (param < 0 || param >= state.tabs.length) {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.error(
`Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
state.tabs.length - 1
}`,
);
}
return;
}
setState((prev) => {
return {
...prev,
active: [param, prev.tabs[param].name],
};
});
} else if (typeof param === "string") {
const index = state.tabs.findIndex((tab) => tab.name === param);
if (index === -1) {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.error(
`Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
.map((tab) => tab.name)
.join(", ")}`,
);
}
return;
}
setActiveTab(index);
}
}
function setPreviousActive() {
if (state.active[0] === 0) {
return;
}
setActiveTab(state.active[0] - 1);
}
function setNextActive() {
if (state.active[0] === state.tabs.length - 1) {
return;
}
setActiveTab(state.active[0] + 1);
}
return {
getActiveTab,
setActiveTab,
setPreviousActive,
setNextActive,
};
};
const [TabListVariant, resolveTabListVariantProps] = vcn({
base: "flex flex-row bg-gray-100 dark:bg-neutral-800 rounded-lg p-1.5 gap-1",
variants: {},
@ -30,16 +124,11 @@ interface TabListProps
const TabList = (props: TabListProps) => {
const [variantProps, restProps] = resolveTabListVariantProps(props);
return (
<div
className={TabListVariant(variantProps)}
{...restProps}
/>
);
return <div className={TabListVariant(variantProps)} {...restProps} />;
};
const [TabTriggerVariant, resolveTabTriggerVariantProps] = vcn({
base: "py-1.5 rounded-md grow transition-all text-sm",
base: "py-1.5 rounded-md flex-grow transition-all text-sm",
variants: {
active: {
true: "bg-white/100 dark:bg-black/100 text-black dark:text-white",
@ -80,8 +169,7 @@ const TabTrigger = (props: TabTriggerProps) => {
};
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [name, setContext]);
}, [name]);
const Comp = props.asChild ? Slot : "button";
@ -124,10 +212,7 @@ const TabContent = (props: TabContentProps) => {
const { name, ...restProps } = restPropsBeforeParse;
const [context] = React.useContext(TabContext);
if (context.active[1] !== name) {
return null;
}
if (context.active[1] === name) {
return (
<Slot
className={tabContentVariant({
@ -136,6 +221,9 @@ const TabContent = (props: TabContentProps) => {
{...restProps}
/>
);
} else {
return null;
}
};
export { TabProvider, TabList, TabTrigger, TabContent };
export { TabProvider, useTabState, TabList, TabTrigger, TabContent };

26
packages/react/components/Tabs/Context.ts
View File

@ -1,26 +0,0 @@
import React from "react";
export interface Tab {
name: string;
}
export interface TabContextBody {
tabs: Tab[];
active: [number, string] /* index, name */;
}
export const TabContext = React.createContext<
[TabContextBody, React.Dispatch<React.SetStateAction<TabContextBody>>]
>([
{
tabs: [],
active: [0, ""],
},
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using TabContext outside of provider.",
);
}
},
]);

74
packages/react/components/Tabs/Hook.ts
View File

@ -1,74 +0,0 @@
import React from "react";
import { TabContext } from "./Context";
/**
* Provides current state for tab, using context.
* Also provides functions to control state.
*/
export const useTabState = () => {
const [state, setState] = React.useContext(TabContext);
function getActiveTab() {
return state.active;
}
function setActiveTab(name: string): void;
function setActiveTab(index: number): void;
function setActiveTab(param: string | number) {
if (typeof param === "number") {
if (param < 0 || param >= state.tabs.length) {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.error(
`Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
state.tabs.length - 1
}`,
);
}
return;
}
setState((prev) => {
return {
...prev,
active: [param, prev.tabs[param].name],
};
});
} else if (typeof param === "string") {
const index = state.tabs.findIndex((tab) => tab.name === param);
if (index === -1) {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.error(
`Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
.map((tab) => tab.name)
.join(", ")}`,
);
}
return;
}
setActiveTab(index);
}
}
function setPreviousActive() {
if (state.active[0] === 0) {
return;
}
setActiveTab(state.active[0] - 1);
}
function setNextActive() {
if (state.active[0] === state.tabs.length - 1) {
return;
}
setActiveTab(state.active[0] + 1);
}
return {
getActiveTab,
setActiveTab,
setPreviousActive,
setNextActive,
};
};

2
packages/react/components/Tabs/index.ts
View File

@ -1,2 +0,0 @@
export * from "./Component";
export * from "./Hook";

337
packages/react/components/Toast.tsx Normal file
View File

@ -0,0 +1,337 @@
import React, { useEffect, useId, useRef } from "react";
import ReactDOM from "react-dom";
import { VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
interface ToastOption {
closeButton: boolean;
closeTimeout: number | null;
}
const defaultToastOption: ToastOption = {
closeButton: true,
closeTimeout: 3000,
};
const toastColors = {
background: "bg-white dark:bg-black",
borders: {
default: "border-black/10 dark:border-white/20",
error: "border-red-500/80",
success: "border-green-500/80",
warning: "border-yellow-500/80",
loading: "border-black/50 dark:border-white/50 animate-pulse",
},
};
const [toastVariant] = vcn({
base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
variants: {
status: {
default: toastColors.borders.default,
error: toastColors.borders.error,
success: toastColors.borders.success,
warning: toastColors.borders.warning,
loading: toastColors.borders.loading,
},
life: {
born: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(0,.6,.7,1)]",
normal: "translate-y-0 scale-100 ease-[cubic-bezier(0,.6,.7,1)]",
dead: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(.6,0,1,.7)]",
},
},
defaults: {
status: "default",
life: "born",
},
});
interface ToastBody extends Omit<VariantProps<typeof toastVariant>, "preset"> {
title: string;
description: string;
}
let index = 0;
let toasts: Record<
`${number}`,
ToastBody & Partial<ToastOption> & { subscribers: (() => void)[] }
> = {};
let subscribers: (() => void)[] = [];
/**
* ====
* Controls
* ====
*/
function subscribe(callback: () => void) {
subscribers.push(callback);
return () => {
subscribers = subscribers.filter((subscriber) => subscriber !== callback);
};
}
function getSnapshot() {
return { ...toasts };
}
function subscribeSingle(id: `${number}`) {
return (callback: () => void) => {
toasts[id].subscribers.push(callback);
return () => {
toasts[id].subscribers = toasts[id].subscribers.filter(
(subscriber) => subscriber !== callback,
);
};
};
}
function getSingleSnapshot(id: `${number}`) {
return () => {
return {
...toasts[id],
};
};
}
function notify() {
subscribers.forEach((subscriber) => subscriber());
}
function notifySingle(id: `${number}`) {
toasts[id].subscribers.forEach((subscriber) => subscriber());
}
function close(id: `${number}`) {
toasts[id] = {
...toasts[id],
life: "dead",
};
notifySingle(id);
}
function update(
id: `${number}`,
toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
) {
toasts[id] = {
...toasts[id],
...toast,
};
notifySingle(id);
}
function addToast(toast: Omit<ToastBody, "life"> & Partial<ToastOption>) {
const id: `${number}` = `${index}`;
toasts[id] = {
...toast,
subscribers: [],
life: "born",
};
index += 1;
notify();
return {
update: (toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>) =>
update(id, toast),
close: () => close(id),
};
}
function useToast() {
return {
toast: addToast,
update,
close,
};
}
const ToastTemplate = ({
id,
globalOption,
}: {
id: `${number}`;
globalOption: ToastOption;
}) => {
const [toast, setToast] = React.useState<(typeof toasts)[`${number}`]>(
toasts[id],
);
const ref = React.useRef<HTMLDivElement | null>(null);
useEffect(() => {
subscribeSingle(id)(() => {
setToast(getSingleSnapshot(id)());
});
}, []);
const toastData = {
...globalOption,
...toast,
};
React.useEffect(() => {
if (toastData.life === "born") {
requestAnimationFrame(() => {
// To make sure that the toast is rendered as "born" state
// and then change to "normal" state
toasts[id] = {
...toasts[id],
life: "normal",
};
notifySingle(id);
});
}
if (toastData.life === "normal" && toastData.closeTimeout !== null) {
const timeout = setTimeout(() => {
close(id);
}, toastData.closeTimeout);
return () => clearTimeout(timeout);
}
if (toastData.life === "dead") {
let transitionDuration: {
value: number;
unit: string;
} | null;
if (!ref.current) {
transitionDuration = null;
} else if (ref.current.computedStyleMap !== undefined) {
transitionDuration = ref.current
.computedStyleMap()
.get("transition-duration") as { value: number; unit: string };
} else {
const style = /(\d+(\.\d+)?)(.+)/.exec(
window.getComputedStyle(ref.current).transitionDuration,
);
transitionDuration = style
? {
value: parseFloat(style[1] ?? "0"),
unit: style[3] ?? style[2] ?? "s",
}
: null;
}
if (!transitionDuration) {
delete toasts[id];
notify();
return;
}
const calculatedTransitionDuration =
transitionDuration.value *
({
s: 1000,
ms: 1,
}[transitionDuration.unit] ?? 1);
const timeout = setTimeout(() => {
delete toasts[id];
notify();
}, calculatedTransitionDuration);
return () => clearTimeout(timeout);
}
}, [toastData.life, toastData.closeTimeout, toastData.closeButton]);
return (
<div
className={toastVariant({
status: toastData.status,
life: toastData.life,
})}
ref={ref}
>
{toastData.closeButton && (
<button className="absolute top-2 right-2" onClick={() => close(id)}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2rem"
height="1.2rem"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
/>
</svg>
</button>
)}
<div className="text-sm font-bold">{toastData.title}</div>
<div className="text-sm">{toastData.description}</div>
</div>
);
};
const [toasterVariant, resolveToasterVariantProps] = vcn({
base: "fixed p-4 flex flex-col gap-4 top-0 right-0 w-full md:max-w-md md:bottom-0 md:top-auto pointer-events-none z-40",
variants: {},
defaults: {},
});
interface ToasterProps
extends React.ComponentPropsWithoutRef<"div">,
VariantProps<typeof toasterVariant> {
defaultOption?: Partial<ToastOption>;
muteDuplicationWarning?: boolean;
}
const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
const id = useId();
const [variantProps, otherPropsCompressed] =
resolveToasterVariantProps(props);
const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
otherPropsCompressed;
const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
const internalRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const unsubscribe = subscribe(() => {
setToastList(getSnapshot());
});
return unsubscribe;
}, []);
const option = React.useMemo(() => {
return {
...defaultToastOption,
...defaultOption,
};
}, [defaultOption]);
const toasterInstance = document.querySelector("div[data-toaster-root]");
if (toasterInstance && id !== toasterInstance.id) {
if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
console.warn(
`Multiple Toaster instances detected. Only one Toaster is allowed.`,
);
}
return null;
}
return (
<>
{ReactDOM.createPortal(
<div
{...otherPropsExtracted}
data-toaster-root
className={toasterVariant(variantProps)}
ref={(el) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
id={id}
>
{Object.entries(toastList).map(([id]) => (
<ToastTemplate
key={id}
id={id as `${number}`}
globalOption={option}
/>
))}
</div>,
document.body,
)}
</>
);
});
export { Toaster, useToast };

204
packages/react/components/Toast/Component.tsx
View File

@ -1,204 +0,0 @@
import {
type VariantProps,
getCalculatedTransitionDuration,
useDocument,
vcn,
} from "@pswui-lib";
import React, { type MutableRefObject, useEffect, useId, useRef } from "react";
import ReactDOM from "react-dom";
import {
type ToastOption,
close,
defaultToastOption,
getSingleSnapshot,
getSnapshot,
notify,
notifySingle,
subscribe,
subscribeSingle,
toasts,
} from "./Store";
import { toastVariant } from "./Variant";
const ToastTemplate = ({
id,
globalOption,
}: {
id: `${number}`;
globalOption: ToastOption;
}) => {
const [toast, setToast] = React.useState<(typeof toasts)[`${number}`]>(
toasts[id],
);
const ref = React.useRef<HTMLDivElement | null>(null);
useEffect(() => {
subscribeSingle(id)(() => {
setToast(getSingleSnapshot(id)());
});
}, [id]);
const toastData = {
...globalOption,
...toast,
};
React.useEffect(() => {
if (toastData.life === "born") {
requestAnimationFrame(function untilBorn() {
/*
To confirm that the toast is rendered as "born" state and then change to "normal" state
This way will make sure born -> normal stage transition animation will work.
*/
const elm = document.querySelector(
`div[data-toaster-root] > div[data-toast-id="${id}"][data-toast-lifecycle="born"]`,
);
if (!elm) return requestAnimationFrame(untilBorn);
toasts[id] = {
...toasts[id],
life: "normal",
};
notifySingle(id);
});
}
if (toastData.life === "normal" && toastData.closeTimeout !== null) {
const timeout = setTimeout(() => {
close(id);
}, toastData.closeTimeout);
return () => clearTimeout(timeout);
}
if (toastData.life === "dead") {
let calculatedTransitionDurationMs = 1;
if (ref.current)
calculatedTransitionDurationMs = getCalculatedTransitionDuration(
ref as MutableRefObject<HTMLDivElement>,
);
const timeout = setTimeout(() => {
delete toasts[id];
notify();
}, calculatedTransitionDurationMs);
return () => clearTimeout(timeout);
}
}, [id, toastData.life, toastData.closeTimeout]);
return (
<div
className={toastVariant({
status: toastData.status,
life: toastData.life,
})}
ref={ref}
data-toast-id={id}
data-toast-lifecycle={toastData.life}
>
{toastData.closeButton && (
<button
className="absolute top-2 right-2"
onClick={() => close(id)}
type={"button"}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2rem"
height="1.2rem"
viewBox="0 0 24 24"
>
<title>Close</title>
<path
fill="currentColor"
d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
/>
</svg>
</button>
)}
<div className="text-sm font-bold">{toastData.title}</div>
<div className="text-sm">{toastData.description}</div>
</div>
);
};
const [toasterVariant, resolveToasterVariantProps] = vcn({
base: "fixed p-4 flex flex-col gap-4 top-0 right-0 w-full md:max-w-md md:bottom-0 md:top-auto pointer-events-none z-40",
variants: {},
defaults: {},
});
interface ToasterProps
extends React.ComponentPropsWithoutRef<"div">,
VariantProps<typeof toasterVariant> {
defaultOption?: Partial<ToastOption>;
muteDuplicationWarning?: boolean;
}
const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
const id = useId();
const [variantProps, otherPropsCompressed] =
resolveToasterVariantProps(props);
const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
otherPropsCompressed;
const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
const internalRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
return subscribe(() => {
setToastList(getSnapshot());
});
}, []);
const option = React.useMemo(() => {
return {
...defaultToastOption,
...defaultOption,
};
}, [defaultOption]);
const document = useDocument();
if (!document) return null;
const toasterInstance = document.querySelector("div[data-toaster-root]");
if (toasterInstance && id !== toasterInstance.id) {
if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
console.warn(
"Multiple Toaster instances detected. Only one Toaster is allowed.",
);
}
return null;
}
return (
<>
{ReactDOM.createPortal(
<div
{...otherPropsExtracted}
data-toaster-root={true}
className={toasterVariant(variantProps)}
ref={(el) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
id={id}
>
{Object.entries(toastList).map(([id]) => (
<ToastTemplate
key={id}
id={id as `${number}`}
globalOption={option}
/>
))}
</div>,
document.body,
)}
</>
);
});
Toaster.displayName = "Toaster";
export { Toaster };

9
packages/react/components/Toast/Hook.ts
View File

@ -1,9 +0,0 @@
import { addToast, close, update } from "./Store";
export function useToast() {
return {
toast: addToast,
update,
close,
};
}

100
packages/react/components/Toast/Store.ts
View File

@ -1,100 +0,0 @@
import type { ToastBody } from "./Variant";
export interface ToastOption {
closeButton: boolean;
closeTimeout: number | null;
}
export const defaultToastOption: ToastOption = {
closeButton: true,
closeTimeout: 3000,
};
let index = 0;
export const toasts: Record<
`${number}`,
ToastBody & Partial<ToastOption> & { subscribers: (() => void)[] }
> = {};
let subscribers: (() => void)[] = [];
/**
* ====
* Controls
* ====
*/
export function subscribe(callback: () => void) {
subscribers.push(callback);
return () => {
subscribers = subscribers.filter((subscriber) => subscriber !== callback);
};
}
export function getSnapshot() {
return { ...toasts };
}
export function subscribeSingle(id: `${number}`) {
return (callback: () => void) => {
toasts[id].subscribers.push(callback);
return () => {
toasts[id].subscribers = toasts[id].subscribers.filter(
(subscriber) => subscriber !== callback,
);
};
};
}
export function getSingleSnapshot(id: `${number}`) {
return () => {
return {
...toasts[id],
};
};
}
export function notify() {
for (const subscriber of subscribers) subscriber();
}
export function notifySingle(id: `${number}`) {
for (const subscriber of toasts[id].subscribers) subscriber();
}
export function close(id: `${number}`) {
toasts[id] = {
...toasts[id],
life: "dead",
};
notifySingle(id);
}
export function update(
id: `${number}`,
toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
) {
toasts[id] = {
...toasts[id],
...toast,
};
notifySingle(id);
}
export function addToast(
toast: Omit<ToastBody, "life"> & Partial<ToastOption>,
) {
const id: `${number}` = `${index}`;
toasts[id] = {
...toast,
subscribers: [],
life: "born",
};
index += 1;
notify();
return {
update: (toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>) =>
update(id, toast),
close: () => close(id),
};
}

40
packages/react/components/Toast/Variant.ts
View File

@ -1,40 +0,0 @@
import { type VariantProps, vcn } from "@pswui-lib";
const toastColors = {
background: "bg-white dark:bg-black",
borders: {
default: "border-black/10 dark:border-white/20",
error: "border-red-500/80",
success: "border-green-500/80",
warning: "border-yellow-500/80",
loading: "border-black/50 dark:border-white/50 animate-pulse",
},
};
export const [toastVariant, resolveToastVariantProps] = vcn({
base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
variants: {
status: {
default: toastColors.borders.default,
error: toastColors.borders.error,
success: toastColors.borders.success,
warning: toastColors.borders.warning,
loading: toastColors.borders.loading,
},
life: {
born: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(0,.6,.7,1)]",
normal: "translate-y-0 scale-100 ease-[cubic-bezier(0,.6,.7,1)]",
dead: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(.6,0,1,.7)]",
},
},
defaults: {
status: "default",
life: "born",
},
});
export interface ToastBody
extends Omit<VariantProps<typeof toastVariant>, "preset"> {
title: string;
description: string;
}

2
packages/react/components/Toast/index.ts
View File

@ -1,2 +0,0 @@
export { Toaster } from "./Component";
export { useToast } from "./Hook";

64
packages/react/components/Tooltip.tsx
View File

@ -1,5 +1,5 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import React, { useState } from "react";
import { VariantProps, vcn } from "@pswui-lib/shared@1.0.0";
interface TooltipContextBody {
position: "top" | "bottom" | "left" | "right";
@ -30,97 +30,55 @@ const [tooltipVariant, resolveTooltipVariantProps] = vcn({
left: "",
right: "",
},
controlled: {
true: "controlled",
false: "",
},
opened: {
true: "opened",
false: "",
},
},
defaults: {
position: "top",
controlled: false,
opened: false,
},
});
interface TooltipProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof tooltipVariant>,
AsChild {}
VariantProps<typeof tooltipVariant> {}
const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
const [variantProps, rest] = resolveTooltipVariantProps(props);
const { asChild, ...extractedRest } = rest;
const contextState = useState<TooltipContextBody>({
...tooltipContextInitial,
...variantProps,
});
const Comp = asChild ? Slot : "div";
return (
<TooltipContext.Provider value={contextState}>
<Comp
ref={ref}
className={tooltipVariant(variantProps)}
{...extractedRest}
/>
<div ref={ref} className={tooltipVariant(variantProps)} {...rest} />
</TooltipContext.Provider>
);
});
Tooltip.displayName = "Tooltip";
const tooltipContentColors = {
variants: {
default:
"bg-white dark:bg-black border-neutral-200 dark:border-neutral-700",
error: "bg-red-400 dark:bg-red-800 border-red-500 text-white",
success: "bg-green-400 dark:bg-green-800 border-green-500 text-white",
warning: "bg-yellow-400 dark:bg-yellow-800 border-yellow-500",
},
background: "bg-white dark:bg-black",
border: "border-neutral-200 dark:border-neutral-700",
};
const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all
group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100
select-none pointer-events-none
group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto
group-[:not(.controlled):hover]/tooltip:[transition:transform_150ms_ease-out_var(--delay),opacity_150ms_ease-out_var(--delay),background-color_150ms_ease-in-out,color_150ms_ease-in-out,border-color_150ms_ease-in-out]`,
base: `absolute py-1 px-3 ${tooltipContentColors.background} border ${tooltipContentColors.border} [--tooltip-offset:2px] opacity-0 group-hover/tooltip:opacity-100 select-none pointer-events-none group-hover/tooltip:select-auto group-hover/tooltip:pointer-events-auto transition-all rounded-md`,
variants: {
position: {
top: "bottom-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-[:not(.controlled):hover]/tooltip:translate-y-0 group-[.opened]/tooltip:translate-y-0 translate-y-[10px]",
top: "bottom-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-hover/tooltip:translate-y-0 translate-y-[10px]",
bottom:
"top-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-[:not(.controlled):hover]/tooltip:translate-y-0 group-[.opened]/tooltip:translate-y-0 translate-y-[-10px]",
left: "right-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-[:not(.controlled):hover]/tooltip:translate-x-0 group-[.opened]/tooltip:translate-x-0 translate-x-[10px]",
"top-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-hover/tooltip:translate-y-0 translate-y-[-10px]",
left: "right-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-hover/tooltip:translate-x-0 translate-x-[10px]",
right:
"left-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-[:not(.controlled):hover]/tooltip:translate-x-0 group-[.opened]/tooltip:translate-x-0 translate-x-[-10px]",
},
delay: {
none: "[--delay:0ms]",
early: "[--delay:150ms]",
normal: "[--delay:500ms]",
late: "[--delay:1000ms]",
"left-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-hover/tooltip:translate-x-0 translate-x-[-10px]",
},
offset: {
sm: "[--tooltip-offset:2px]",
md: "[--tooltip-offset:4px]",
lg: "[--tooltip-offset:8px]",
},
status: {
normal: tooltipContentColors.variants.default,
error: tooltipContentColors.variants.error,
success: tooltipContentColors.variants.success,
warning: tooltipContentColors.variants.warning,
},
},
defaults: {
position: "top",
offset: "md",
delay: "normal",
status: "normal",
},
});
@ -140,12 +98,10 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
...variantProps,
position: contextState.position,
})}
role="tooltip"
{...rest}
/>
);
},
);
TooltipContent.displayName = "TooltipContent";
export { Tooltip, TooltipContent };

18
packages/react/index.html
View File

@ -3,7 +3,23 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dev Environment</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="description" content="PSW/UI is a UI library with minimum dependency." />
<meta name="keywords" content="UI, library, PSW, React, components" />
<meta name="author" content="Shinwoo PARK" />
<meta property="og:title" content="PSW/UI" />
<meta property="og:description" content="PSW/UI is a UI library with minimum dependency." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://ui.psw.kr" />
<meta property="og:image" content="https://ui.psw.kr/android-chrome-512x512.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="PSW/UI" />
<meta name="twitter:description" content="PSW/UI is a UI library with minimum dependency." />
<meta name="twitter:image" content="https://ui.psw.kr/android-chrome-512x512.png" />
<title>PSW/UI</title>
</head>
<body>
<div id="root"></div>

101
packages/react/lib/Slot.tsx
View File

@ -1,101 +0,0 @@
import React from "react";
import { twMerge } from "tailwind-merge";
/**
* Merges the react props.
* Basically childProps will override parentProps.
* But if it is a event handler, style, or className, it will be merged.
*
* @param parentProps - The parent props.
* @param childProps - The child props.
* @returns The merged props.
*/
function mergeReactProps(
parentProps: Record<string, unknown>,
childProps: Record<string, unknown>,
) {
const overrideProps = { ...childProps };
for (const propName in childProps) {
const parentPropValue = parentProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
if (
childPropValue &&
parentPropValue &&
typeof childPropValue === "function" &&
typeof parentPropValue === "function"
) {
overrideProps[propName] = (...args: unknown[]) => {
childPropValue?.(...args);
parentPropValue?.(...args);
};
} else if (parentPropValue) {
overrideProps[propName] = parentPropValue;
}
} else if (
propName === "style" &&
typeof parentPropValue === "object" &&
typeof childPropValue === "object"
) {
overrideProps[propName] = { ...parentPropValue, ...childPropValue };
} else if (
propName === "className" &&
typeof parentPropValue === "string" &&
typeof childPropValue === "string"
) {
overrideProps[propName] = twMerge(parentPropValue, childPropValue);
}
}
return { ...parentProps, ...overrideProps };
}
/**
* Takes an array of refs, and returns a single ref.
*
* @param refs - The array of refs.
* @returns The single ref.
*/
function combinedRef<I>(refs: React.Ref<I | null>[]) {
return (instance: I | null) => {
for (const ref of refs) {
if (ref instanceof Function) {
ref(instance);
} else if (ref) {
(ref as React.MutableRefObject<I | null>).current = instance;
}
}
};
}
interface SlotProps {
children?: React.ReactNode;
}
export const Slot = React.forwardRef<
HTMLElement,
SlotProps & Record<string, unknown>
>((props, ref) => {
const { children, ...slotProps } = props;
const { asChild: _1, ...safeSlotProps } = slotProps;
if (!React.isValidElement(children)) {
console.warn(`given children "${children}" is not valid for asChild`);
return null;
}
return React.cloneElement(children, {
...mergeReactProps(
safeSlotProps,
children.props as Record<string, unknown>,
),
ref: combinedRef([
ref,
(children as unknown as { ref: React.Ref<HTMLElement> }).ref,
]),
} as never);
});
export interface AsChild {
asChild?: boolean;
}

4
packages/react/lib/index.ts
View File

@ -1,4 +0,0 @@
export * from "./vcn";
export * from "./Slot";
export * from "./useDocument";
export * from "./useAnimatedMount";

217
packages/react/lib/vcn.ts → packages/react/lib/shared@1.0.0.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import { twMerge } from "tailwind-merge";
/**
@ -57,31 +58,6 @@ type VariantKV<V extends VariantType> = {
[VariantKey in keyof V]: BooleanString<keyof V[VariantKey] & string>;
};
/**
* Used for safely casting `Object.entries(<VariantKV>)`
*/
type VariantKVEntry<V extends VariantType> = [
keyof V,
BooleanString<keyof V[keyof V] & string>,
][];
/**
* Takes VariantKV as parameter, return className string.
*
* @example
* vcn({
* /* ... *\/
* dynamics: [
* ({ a, b }) => {
* return a === "something" ? "asdf" : b
* },
* ]
* })
*/
type DynamicClassName<V extends VariantType> = (
variantProps: VariantKV<V>,
) => string;
/**
* Takes VariantType, and returns a type that represents the preset object.
*
@ -119,7 +95,6 @@ export function vcn<V extends VariantType>(param: {
*/
base?: string | undefined;
variants: V;
dynamics?: DynamicClassName<V>[];
defaults: VariantKV<V>;
presets?: undefined;
}): [
@ -134,7 +109,6 @@ export function vcn<V extends VariantType>(param: {
/**
* Any Props -> Variant Props, Other Props
*/
// biome-ignore lint/suspicious/noExplicitAny: using unknown causes error `Index signature for type 'string' is missing in type --Props`.
<AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve,
) => [
@ -150,7 +124,6 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
*/
base?: string | undefined;
variants: V /* VariantType */;
dynamics?: DynamicClassName<V>[];
defaults: VariantKV<V>;
presets: P;
}): [
@ -166,7 +139,6 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
/**
* Any Props -> Variant Props, Other Props
*/
// biome-ignore lint/suspicious/noExplicitAny: using unknown causes error `Index signature for type 'string' is missing in type --Props`.
<AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve,
) => [
@ -186,58 +158,19 @@ export function vcn<
>({
base,
variants,
dynamics = [],
defaults,
presets,
}: {
base?: string | undefined;
variants: V;
dynamics?: DynamicClassName<V>[];
defaults: VariantKV<V>;
presets?: P;
}) {
/**
* --Internal utility function--
* After transforming props to final version (which means "after overriding default, preset, and variant props sent via component props")
* It turns final version of variant props to className
*/
function __transformer__(
final: VariantKV<V>,
dynamics: string[],
propClassName?: string,
): string {
const classNames: string[] = [];
for (const [variantName, variantKey] of Object.entries(
final,
) as VariantKVEntry<V>) {
classNames.push(variants[variantName][variantKey.toString()]);
}
return twMerge(base, ...classNames, ...dynamics, propClassName);
}
return [
/**
* Takes any props (including className), and returns the class name.
* If there is no variant specified in props, then it will fallback to preset, and then default.
*
*
* Process priority of variant will be:
*
* --- Processed as string
* 1. Base
*
* --- Processed as object (it will ignore rest of "not duplicated classname" in lower priority)
* 2. Default
* 3. Preset (overriding default)
* 4. Variant props via component (overriding preset)
*
* --- Processed as string
* 5. Dynamic classNames using variant props
* 6. User's className (overriding dynamic)
*
*
* @param variantProps - The variant props including className.
* @returns The class name.
*/
@ -246,43 +179,42 @@ export function vcn<
VariantKV<V>
>,
) => {
const { className, preset, ..._otherVariantProps } = variantProps;
const { className, preset, ...otherVariantProps } = variantProps;
const currentPreset: P[keyof P] | null =
presets && preset ? (presets as NonNullable<P>)[preset] ?? null : null;
const presetVariantKeys: (keyof V)[] = Object.keys(currentPreset ?? {});
return twMerge(
base,
...(
Object.entries(defaults) as [keyof V, keyof V[keyof V] & string][]
).map<string>(([variantKey, defaultValue]) => {
// Omit<Partial<VariantKV<V>> & { className; preset; }, className | preset> = Partial<VariantKV<V>> (safe to cast)
// We all know `keyof V` = string, right? (but typescript says it's not, so.. attacking typescript with unknown lol)
const otherVariantProps = _otherVariantProps as unknown as Partial<
VariantKV<V>
>;
// Partial<VariantKV<V>>[keyof V] => { [k in keyof V]?: BooleanString<keyof V[keyof V] & string> } => BooleanString<keyof V[keyof V]>
const kv: VariantKV<V> = { ...defaults };
const directVariantValue: (keyof V[keyof V] & string) | undefined = (
otherVariantProps as unknown as Partial<VariantKV<V>>
)[variantKey]?.toString?.(); // BooleanString<> -> string (safe to index V[keyof V])
// Preset Processing
if (presets && preset && preset in presets) {
for (const [variantName, variantKey] of Object.entries(
// typescript bug (casting to NonNullable<P> required)
(presets as NonNullable<P>)[preset],
) as VariantKVEntry<V>) {
kv[variantName] = variantKey;
}
}
const currentPresetVariantValue:
| (keyof V[keyof V] & string)
| undefined =
!!currentPreset && presetVariantKeys.includes(variantKey)
? (currentPreset as Partial<VariantKV<V>>)[
variantKey
]?.toString?.()
: undefined;
// VariantProps Processing
for (const [variantName, variantKey] of Object.entries(
otherVariantProps,
) as VariantKVEntry<V>) {
if (typeof variantKey === "undefined") continue;
kv[variantName] = variantKey;
}
// make dynamics result
const dynamicClasses: string[] = [];
for (const dynamicFunction of dynamics) {
dynamicClasses.push(dynamicFunction(kv));
}
return __transformer__(kv, dynamicClasses, className);
const variantValue: keyof V[keyof V] & string =
directVariantValue ?? currentPresetVariantValue ?? defaultValue;
return variants[variantKey][variantValue];
}),
(
currentPreset as Partial<VariantKV<V>> | null
)?.className?.toString?.(), // preset's classname comes after user's variant props? huh..
className,
);
},
/**
* Takes any props, parse variant props and other props.
* If `options.excludeA` is true, then it will parse `A` as "other" props.
@ -291,7 +223,7 @@ export function vcn<
* @param anyProps - Any props that have passed to the component.
* @returns [variantProps, otherProps]
*/
<AnyPropBeforeResolve extends Record<string, unknown>>(
<AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve,
) => {
const variantKeys = Object.keys(variants) as (keyof V)[];
@ -336,5 +268,86 @@ export function vcn<
* }
* ```
*/
export type VariantProps<F extends (props: Record<string, unknown>) => string> =
F extends (props: infer P) => string ? { [key in keyof P]: P[key] } : never;
export type VariantProps<F extends (props: any) => string> = F extends (
props: infer P,
) => string
? P
: never;
/**
* Merges the react props.
* Basically childProps will override parentProps.
* But if it is a event handler, style, or className, it will be merged.
*
* @param parentProps - The parent props.
* @param childProps - The child props.
* @returns The merged props.
*/
function mergeReactProps(
parentProps: Record<string, any>,
childProps: Record<string, any>,
) {
const overrideProps = { ...childProps };
for (const propName in childProps) {
const parentPropValue = parentProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
if (childPropValue && parentPropValue) {
overrideProps[propName] = (...args: unknown[]) => {
childPropValue?.(...args);
parentPropValue?.(...args);
};
} else if (parentPropValue) {
overrideProps[propName] = parentPropValue;
}
} else if (propName === "style") {
overrideProps[propName] = { ...parentPropValue, ...childPropValue };
} else if (propName === "className") {
overrideProps[propName] = twMerge(parentPropValue, childPropValue);
}
}
return { ...parentProps, ...overrideProps };
}
/**
* Takes an array of refs, and returns a single ref.
*
* @param refs - The array of refs.
* @returns The single ref.
*/
function combinedRef<I>(refs: React.Ref<I | null>[]) {
return (instance: I | null) =>
refs.forEach((ref) => {
if (ref instanceof Function) {
ref(instance);
} else if (!!ref) {
(ref as React.MutableRefObject<I | null>).current = instance;
}
});
}
interface SlotProps {
children?: React.ReactNode;
}
export const Slot = React.forwardRef<any, SlotProps & Record<string, any>>(
(props, ref) => {
const { children, ...slotProps } = props;
const { asChild: _1, ...safeSlotProps } = slotProps;
if (!React.isValidElement(children)) {
console.warn(`given children "${children}" is not valid for asChild`);
return null;
}
return React.cloneElement(children, {
...mergeReactProps(safeSlotProps, children.props),
ref: combinedRef([ref, (children as any).ref]),
} as any);
},
);
export interface AsChild {
asChild?: boolean;
}

85
packages/react/lib/useAnimatedMount.ts
View File

@ -1,85 +0,0 @@
import { type MutableRefObject, useCallback, useEffect, useState } from "react";
function getCalculatedTransitionDuration(
ref: MutableRefObject<HTMLElement>,
): number {
let transitionDuration: {
value: number;
unit: string;
} | null;
if (ref.current.computedStyleMap !== undefined) {
transitionDuration = ref.current
.computedStyleMap()
.get("transition-duration") as { value: number; unit: string };
} else {
const style = /(\d+(\.\d+)?)(.+)/.exec(
window.getComputedStyle(ref.current).transitionDuration,
);
if (!style) return 0;
transitionDuration = {
value: Number.parseFloat(style[1] ?? "0"),
unit: style[3] ?? style[2] ?? "s",
};
}
return (
transitionDuration.value *
({
s: 1000,
ms: 1,
}[transitionDuration.unit] ?? 1)
);
}
/*
* isMounted: true isRendered: true isRendered: false isMounted: false
* Component Mount Component Appear Component Disappear Component Unmount
* v v v v
* |-|=================|------------------------|======================|-|
*/
function useAnimatedMount(
visible: boolean,
ref: MutableRefObject<HTMLElement | null>,
callbacks?: { onMount: () => void; onUnmount: () => void },
) {
const [state, setState] = useState<{
isMounted: boolean;
isRendered: boolean;
}>({ isMounted: visible, isRendered: visible });
const umountCallback = useCallback(() => {
setState((p) => ({ ...p, isRendered: false }));
const calculatedTransitionDuration = ref.current
? getCalculatedTransitionDuration(ref as MutableRefObject<HTMLElement>)
: 0;
setTimeout(() => {
setState((p) => ({ ...p, isMounted: false }));
callbacks?.onUnmount?.();
}, calculatedTransitionDuration);
}, [ref, callbacks]);
const mountCallback = useCallback(() => {
setState((p) => ({ ...p, isMounted: true }));
callbacks?.onMount?.();
requestAnimationFrame(function onMount() {
if (!ref.current) return requestAnimationFrame(onMount);
setState((p) => ({ ...p, isRendered: true }));
});
}, [ref.current, callbacks]);
useEffect(() => {
console.log(state);
if (!visible && state.isRendered) {
umountCallback();
} else if (visible && !state.isMounted) {
mountCallback();
}
}, [state, visible, mountCallback, umountCallback]);
return state;
}
export { getCalculatedTransitionDuration, useAnimatedMount };

21
packages/react/lib/useDocument.ts
View File

@ -1,21 +0,0 @@
"use client";
import { useEffect, useState } from "react";
/**
* This hook allows components to use `document` as like they're always in the client side.
* Return undefined if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
*/
function useDocument(): undefined | Document {
const [initialRender, setInitialState] = useState(true);
useEffect(() => {
setInitialState(false);
}, []);
if (typeof document === "undefined" || initialRender) return undefined;
return document;
}
export { useDocument };

30
packages/react/package.json
View File

@ -6,22 +6,42 @@
"scripts": {
"dev": "vite",
"build": "tsc && vite build && cp ./404.html ./dist",
"lint": "biome check --no-errors-on-unmatched",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/vite": "^4.0.12",
"@mdx-js/react": "^3.0.1",
"@stefanprobst/rehype-extract-toc": "^2.2.0",
"highlight.js": "^11.9.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^2.3.0",
"tailwindcss": "^4.0.12"
"react-router-dom": "^6.23.1",
"react-syntax-highlighter": "^15.5.0",
"rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.0",
"tailwind-merge": "^2.3.0"
},
"devDependencies": {
"@mdx-js/rollup": "^3.0.1",
"@tailwindcss/typography": "^0.5.13",
"@types/mdx": "^2.0.13",
"@types/node": "^20.12.13",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@types/react-router-dom": "^5.3.3",
"@types/react-syntax-highlighter": "^15",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"eslint-plugin-storybook": "^0.8.0",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"vite": "^5.2.0"
"vite": "^5.2.0",
"vite-plugin-dynamic-import": "^1.5.0"
}
}

BIN
packages/react/public/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
packages/react/public/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
packages/react/public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
packages/react/public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 B

BIN
packages/react/public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 564 B

BIN
packages/react/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

23
packages/react/public/registry.json Normal file
View File

@ -0,0 +1,23 @@
{
"base": "https://raw.githubusercontent.com/pswui/ui",
"paths": {
"components": "/main/packages/react/components/{componentName}",
"lib": "/main/packages/react/lib/shared@{version}.tsx"
},
"lib": [
"1.0.0"
],
"components": {
"button": { "name": "Button.tsx", "libVersion": "1.0.0" },
"checkbox": { "name": "Checkbox.tsx", "libVersion": "1.0.0" },
"dialog": { "name": "Dialog.tsx", "libVersion": "1.0.0" },
"drawer": { "name": "Drawer.tsx", "libVersion": "1.0.0" },
"input": { "name": "Input.tsx", "libVersion": "1.0.0" },
"label": { "name": "Label.tsx", "libVersion": "1.0.0" },
"popover": { "name": "Popover.tsx", "libVersion": "1.0.0" },
"switch": { "name": "Switch.tsx", "libVersion": "1.0.0" },
"tabs": { "name": "Tabs.tsx", "libVersion": "1.0.0" },
"toast": { "name": "Toast.tsx", "libVersion": "1.0.0" },
"tooltip": {"name": "Tooltip.tsx", "libVersion": "1.0.0" }
}
}

20
packages/react/public/site.webmanifest Normal file
View File

@ -0,0 +1,20 @@
{
"name": "PSW/UI",
"short_name": "PSWUI",
"description": "PSW/UI is a UI library with minimum dependency.",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

208
packages/react/src/App.tsx Normal file
View File

@ -0,0 +1,208 @@
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider,
redirect,
} from "react-router-dom";
import MainLayout from "./MainLayout";
import Home from "./Home";
import DocsLayout from "./DocsLayout";
import ErrorBoundary from "./ErrorHandler";
import DynamicLayout from "./DynamicLayout";
import { Code } from "./components/LoadedCode";
import DocsIntroduction, {
tableOfContents as docsIntroductionToc,
} from "./docs/introduction.mdx";
import DocsInstallation, {
tableOfContents as docsInstallationToc,
} from "./docs/installation.mdx";
import { HeadingContext } from "./HeadingContext";
import React, {
ForwardedRef,
forwardRef,
useContext,
useEffect,
useRef,
} from "react";
function buildThresholdList() {
const thresholds: number[] = [];
const numSteps = 20;
for (let i = 1.0; i <= numSteps; i++) {
const ratio = i / numSteps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
return (prop: any, ref: ForwardedRef<HTMLHeadingElement>) => {
const internalRef = useRef<HTMLHeadingElement | null>(null);
const [_, setActiveHeadings] = useContext(HeadingContext);
useEffect(() => {
const observer = new IntersectionObserver(
([{ target, intersectionRatio }]) => {
if (intersectionRatio > 0.5) {
setActiveHeadings((prev) => [...prev, target.id]);
} else {
setActiveHeadings((prev) => prev.filter((id) => id !== target.id));
}
},
{
root: null,
rootMargin: "0px",
threshold: buildThresholdList(),
},
);
if (internalRef.current) {
observer.observe(internalRef.current);
}
return () => {
observer.disconnect();
};
}, [internalRef.current]);
return (
<Level
{...prop}
className={`${prop.className}`}
ref={(el) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (el && ref) {
ref.current = el;
}
}}
/>
);
};
}
const overrideComponents = {
pre: forwardRef<HTMLDivElement, { children: React.ReactElement }>(
(props, ref) => {
const {
props: { children, className },
} = React.cloneElement(React.Children.only(props.children));
const language =
(typeof className !== "string" || !className.includes("language-")
? "typescript"
: /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
return (
<Code ref={ref} language={language}>
{children as string}
</Code>
);
},
),
code: forwardRef<HTMLElement, any>((props: any, ref) => (
<code
ref={ref}
{...props}
className={`${props.className} rounded-md bg-neutral-800 text-orange-500 font-light p-1 before:content-none after:content-none`}
/>
)),
table: forwardRef<HTMLTableElement, any>((props: any, ref) => (
<div className="overflow-auto">
<table ref={ref} {...props} className={`${props.className}`} />
</div>
)),
h1: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h1")),
h2: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h2")),
h3: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h3")),
h4: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h4")),
h5: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h5")),
h6: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h6")),
};
const docsModules = import.meta.glob("./docs/components/*.mdx");
const routes = Object.keys(docsModules).map((path) => {
const sfPath = path.split("/").pop()?.replace(".mdx", "");
return (
<Route
key={path}
path={sfPath}
lazy={async () => {
const { default: C, tableOfContents } = await import(
`./docs/components/${sfPath}.mdx`
);
return {
Component: () => (
<DynamicLayout toc={tableOfContents}>
<C components={overrideComponents} />
</DynamicLayout>
),
};
}}
/>
);
});
const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/;
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
<Route
index
loader={() =>
REDIRECTED_404.test(window.location.search)
? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/")
: true
}
element={<Home />}
/>
<Route path="docs" element={<DocsLayout />}>
<Route index loader={() => redirect("/docs/introduction")} />
<Route
path="introduction"
element={
<DynamicLayout toc={docsIntroductionToc}>
<DocsIntroduction />
</DynamicLayout>
}
/>
<Route
path="installation"
element={
<DynamicLayout toc={docsInstallationToc}>
<DocsInstallation />
</DynamicLayout>
}
/>
<Route path="components">
<Route
index
loader={() =>
redirect(
`/docs/components/${Object.keys(docsModules)[0]
.split("/")
.pop()
?.replace(".mdx", "")}`,
)
}
/>
{routes}
</Route>
</Route>
</Route>,
),
);
function App() {
return <RouterProvider router={router} />;
}
export default App;

43
packages/react/src/DocsLayout.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Link, useLocation } from "react-router-dom";
import { Outlet } from "react-router-dom";
import RouteObject from "./RouteObject";
function SideNav() {
const location = useLocation();
return (
<nav className="sticky top-16 overflow-auto max-h-[calc(100vh-4rem)] md:flex flex-col justify-start items-start gap-8 p-8 hidden">
{Object.entries(RouteObject.sideNav).map(([categoryName, links]) => {
return (
<section
className="flex flex-col gap-2 justify-center items-start"
key={categoryName}
>
<span className="font-bold">{categoryName}</span>
{links.map((link) => (
<Link
to={link.path}
key={link.path}
className="text-sm text-neutral-500 hover:text-neutral-700 data-[active=true]:text-current"
data-active={link.eq(location.pathname)}
>
{link.name}
</Link>
))}
</section>
);
})}
</nav>
);
}
function DocsLayout() {
return (
<div className="flex-grow grid grid-cols-1 md:grid-cols-[12rem_1fr] lg:grid-cols-[12rem_1fr_10rem] w-full max-w-5xl mx-auto">
<SideNav />
<Outlet />
</div>
);
}
export default DocsLayout;

63
packages/react/src/DynamicLayout.tsx Normal file
View File

@ -0,0 +1,63 @@
import { ReactNode, Fragment, useState, useContext } from "react";
import { type Toc } from "@stefanprobst/rehype-extract-toc";
import { useLocation } from "react-router-dom";
import { HeadingContext } from "./HeadingContext";
function RecursivelyToc({ toc }: { toc: Toc }) {
const location = useLocation();
const [activeHeadings] = useContext(HeadingContext);
return (
<ul>
{toc.map((tocEntry) => {
return (
<Fragment key={tocEntry.id}>
<li
key={tocEntry.id}
data-id={tocEntry.id}
className="text-neutral-500 data-[active='true']:text-black dark:data-[active='true']:text-white text-sm font-medium"
style={{ paddingLeft: `${tocEntry.depth - 1}rem` }}
data-active={
activeHeadings.includes(tocEntry.id ?? "")
? true
: location.hash.length > 0
? location.hash === `#${tocEntry.id}`
: false
}
>
<a href={`#${tocEntry.id}`}>{tocEntry.value}</a>
</li>
{Array.isArray(tocEntry.children) && (
<RecursivelyToc toc={tocEntry.children} />
)}
</Fragment>
);
})}
</ul>
);
}
export default function DynamicLayout({
children,
toc,
}: {
children: ReactNode;
toc: Toc;
}) {
const [activeHeadings, setActiveHeadings] = useState<string[]>([]);
return (
<HeadingContext.Provider value={[activeHeadings, setActiveHeadings]}>
<div className="w-full flex flex-col items-center">
<main className="w-full [:not(:where([class~='not-prose'],[class~='not-prose']_*))]:prose-sm prose lg:[:not(:where([class~='not-prose'],_[class~='not-prose']_*))]:prose-lg p-8 dark:prose-invert">
{children}
</main>
</div>
<nav className="hidden lg:flex flex-col gap-2 py-8 px-4 sticky top-16 overflow-auto max-h-[calc(100vh-4rem)]">
<span className="font-bold text-sm">On This Page</span>
<RecursivelyToc toc={toc} />
</nav>
</HeadingContext.Provider>
);
}

19
packages/react/src/ErrorHandler.tsx Normal file
View File

@ -0,0 +1,19 @@
import { isRouteErrorResponse, useRouteError } from "react-router-dom";
import UnexpectedError from "./errors/Unexpected";
import PageNotFound from "./errors/PageNotFound";
function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
if (error.status === 404) {
return <PageNotFound />;
} else {
return <UnexpectedError />;
}
} else {
return <UnexpectedError />;
}
}
export default ErrorBoundary;

12
packages/react/src/HeadingContext.tsx Normal file
View File

@ -0,0 +1,12 @@
import { Dispatch, SetStateAction, createContext } from "react";
export const HeadingContext = createContext<
[string[], Dispatch<SetStateAction<string[]>>]
>([
[],
() => {
if (process.env && process.env.NODE_ENV === "development") {
console.log("HeadingContext outside");
}
},
]);

30
packages/react/src/Home.tsx Normal file
View File

@ -0,0 +1,30 @@
import { Link } from "react-router-dom";
import { Button } from "../components/Button";
function Home() {
return (
<main className="flex-grow h-full flex flex-col p-4 justify-center items-center">
<section className="h-full flex flex-col justify-center items-center text-center gap-8">
<header className="flex flex-col justify-center items-center gap-2">
<h1 className="text-4xl font-bold">
Build your components in isolation
</h1>
<p className="text-xl max-w-xl">
There are a lot of component libraries out there, but why it install
so many things?
</p>
</header>
<div className="flex flex-row justify-center items-center gap-2">
<Button asChild preset="default">
<Link to="/docs">Get Started</Link>
</Button>
<Button asChild preset="ghost">
<Link to="/docs/components">Components</Link>
</Button>
</div>
</section>
</main>
);
}
export default Home;

215
packages/react/src/MainLayout.tsx Normal file
View File

@ -0,0 +1,215 @@
import { useEffect, useState } from "react";
import { Link, Outlet, useLocation } from "react-router-dom";
import { Button } from "../components/Button";
import RouteObject from "./RouteObject";
import { Toaster } from "@components/Toast";
import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
import {
DrawerClose,
DrawerContent,
DrawerOverlay,
DrawerRoot,
DrawerTrigger,
} from "@components/Drawer";
type Theme = "light" | "dark" | "system";
function ThemeButton() {
const [theme, setTheme] = useState<Theme>(
(localStorage.getItem("theme") as Theme) || "system"
);
useEffect(() => {
document.documentElement.classList.toggle("dark", theme === "dark");
document.documentElement.classList.toggle("system", theme === "system");
localStorage.setItem("theme", theme);
}, [theme]);
return (
<Popover>
<PopoverTrigger>
<Button preset="ghost" size="icon">
{/* material-symbols:light-mode */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
className="dark:hidden"
>
<path
fill="currentColor"
d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z"
/>
</svg>
{/* material-symbols:dark-mode */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
className="hidden dark:block"
>
<path
fill="currentColor"
d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent anchor="bottomLeft" className="w-32">
<Button
preset="ghost"
onClick={() => setTheme("light")}
className="w-full px-2 py-1.5 text-sm"
>
Light
</Button>
<Button
preset="ghost"
onClick={() => setTheme("dark")}
className="w-full px-2 py-1.5 text-sm"
>
Dark
</Button>
<Button
preset="ghost"
onClick={() => setTheme("system")}
className="w-full px-2 py-1.5 text-sm"
>
System
</Button>
</PopoverContent>
</Popover>
);
}
function TopNav() {
const location = useLocation();
return (
<>
<nav className="sticky top-0 z-20 bg-transparent backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800 w-full max-w-screen px-8 flex flex-row justify-center items-center h-16">
<div
data-role="wrapper"
className="flex flex-row items-center justify-between w-full max-w-6xl text-lg"
>
<div
data-role="links"
className="hidden md:flex flex-row items-center gap-3"
>
<Link to="/" className="font-bold">
PSW/UI
</Link>
{RouteObject.mainNav.map((link) => {
return (
<Link
key={link.path}
to={link.path}
data-active={link.eq(location.pathname)}
className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
>
{link.name}
</Link>
);
})}
</div>
<div data-role="mobile-links" className="flex md:hidden">
<DrawerRoot>
<DrawerTrigger>
<Button preset="ghost" size="icon">
{/* mdi:menu */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
/>
</svg>
</Button>
</DrawerTrigger>
<DrawerOverlay className="z-[99]">
<DrawerContent className="w-[300px] overflow-auto">
<DrawerClose className="absolute top-4 right-4">
<Button preset="ghost" size="icon">
{/* mdi:close */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M19 6.41L17.59 5 12 9.27 6.41 5 5 6.41 9.27 11 5 17.59 6.41 19 12 14.73 17.59 19 19 17.59 13.41 12 19 6.41"
/>
</svg>
</Button>
</DrawerClose>
<div className="flex flex-col justify-start items-start gap-6 text-lg">
<div className="flex flex-col justify-start items-start gap-3">
<DrawerClose>
<Link to="/" className="font-extrabold">
PSW/UI
</Link>
</DrawerClose>
{RouteObject.mainNav.map((link) => {
return (
<DrawerClose key={link.path}>
<Link to={link.path}>{link.name}</Link>
</DrawerClose>
);
})}
</div>
{Object.entries(RouteObject.sideNav).map(
([categoryName, links]) => {
return (
<div
className="flex flex-col justify-start items-start gap-3"
key={categoryName}
>
<h2 className="font-bold">{categoryName}</h2>
{links.map((link) => {
return (
<DrawerClose key={link.path}>
<Link
to={link.path}
className="text-base opacity-75"
>
{link.name}
</Link>
</DrawerClose>
);
})}
</div>
);
}
)}
</div>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
</div>
<div data-role="controls" className="flex flex-row items-center">
<ThemeButton />
</div>
</div>
</nav>
</>
);
}
function MainLayout() {
return (
<>
<Toaster className="top-16" />
<TopNav />
<Outlet />
</>
);
}
export default MainLayout;

49
packages/react/src/RouteObject.ts Normal file
View File

@ -0,0 +1,49 @@
const docsModules = import.meta.glob('./docs/components/*.mdx');
const mainNav = [
{
path: "/docs",
name: "Docs",
eq: (pathname: string) => pathname.startsWith("/docs") && !pathname.startsWith("/docs/components")
},
{
path: "/docs/components",
name: "Components",
eq: (pathname: string) => pathname.startsWith("/docs/components")
},
{
path: "https://github.com/p-sw/ui",
name: "Github",
eq: () => false
}
];
const sideNav: Record<string, ({ path: string; name: string; eq: (path: string) => boolean })[]> = {
"Documents": [
{
path: "/docs/introduction",
name: "Introduction",
eq: (pathname: string) => pathname === "/docs/introduction"
},
{
path: "/docs/installation",
name: "Installation",
eq: (pathname: string) => pathname === "/docs/installation"
}
],
"Components": []
};
Object.keys(docsModules).forEach((path) => {
const name = (path.split('/').pop() ?? '').replace('.mdx', '');
sideNav["Components"].push({
path: path.replace('./docs', '/docs').replace('.mdx', ''),
name: name.charAt(0).toUpperCase() + name.slice(1),
eq: (pathname: string) => pathname === path.replace('./docs', '/docs').replace('.mdx', '')
});
});
export default {
mainNav,
sideNav
};

119
packages/react/src/components/LoadedCode.tsx Normal file
View File

@ -0,0 +1,119 @@
import {forwardRef, useEffect, useState} from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { Button } from "@components/Button";
import { useToast } from "@components/Toast";
import { twMerge } from "tailwind-merge";
export const GITHUB = "https://raw.githubusercontent.com/p-sw/ui/main";
export const LoadedCode = ({
from,
className,
}: {
from: string;
className?: string;
}) => {
const [state, setState] = useState<string | undefined | null>();
const { toast } = useToast();
useEffect(() => {
(async () => {
const res = await fetch(from);
const text = await res.text();
setState(text);
})();
}, [from]);
return (
<div className={twMerge("relative", className)}>
<Button
preset="default"
size="icon"
className="absolute top-4 right-4 text-black dark:text-white z-10"
onClick={() => {
if (state && state.length > 0) {
void navigator.clipboard.writeText(state ?? "");
toast({
title: "Copied",
description: "The code has been copied to your clipboard.",
status: "success",
});
} else {
toast({
title: "Error",
description: "It seems like code is not loaded yet.",
status: "error",
});
}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
/>
</svg>
</Button>
<SyntaxHighlighter
language="typescript"
style={gruvboxDark}
className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""}`}
customStyle={{ padding: "1rem" }}
>
{state ?? ""}
</SyntaxHighlighter>
</div>
);
};
export const Code = forwardRef<HTMLDivElement, { children: string; className?: string; language: string }>(({
children,
className,
language,
}, ref) => {
const { toast } = useToast();
return (
<div className={twMerge("relative", className)} ref={ref}>
<Button
preset="default"
size="icon"
className="absolute top-4 right-4 text-black dark:text-white z-10"
onClick={() => {
void navigator.clipboard.writeText(children ?? "");
toast({
title: "Copied",
description: "The code has been copied to your clipboard.",
status: "success",
});
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2z"
/>
</svg>
</Button>
<SyntaxHighlighter
language={language}
style={gruvboxDark}
className={`w-full h-auto max-h-64 rounded-lg`}
customStyle={{ padding: "1rem" }}
>
{children}
</SyntaxHighlighter>
</div>
);
});

32
packages/react/src/components/Story.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import { twMerge } from "tailwind-merge";
const layoutClasses = {
default: "",
centered: "flex items-center justify-center",
};
const Story = React.forwardRef<
HTMLDivElement,
{
layout?: keyof typeof layoutClasses;
children: React.ReactNode;
className?: string;
id?: string;
}
>(({ layout = "default", children, className, id }, ref) => {
return (
<div
className={twMerge(
`bg-white dark:bg-black border border-neutral-300 dark:border-neutral-700 rounded-lg w-full p-4 min-h-48 h-auto my-8 not-prose ${layoutClasses[layout]}`,
className
)}
ref={ref}
id={id}
>
{children}
</div>
);
});
export { Story };

162
packages/react/src/docs/components/Button.mdx Normal file
View File

@ -0,0 +1,162 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
import { ButtonDemo } from "./ButtonBlocks/Preview";
import Examples from "./ButtonBlocks/Examples";
# Button
Displays a button or a component that looks like a button.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<ButtonDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
## Installation
1. Create a new file `Button.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={`${GITHUB}/packages/react/components/Button.tsx`} />
## Usage
```tsx
import { Button } from "@components/Button";
```
```html
<Button>Button</Button>
```
## Props
### Variants
| Prop | Type | Default | Description |
|:-------------|:------------------------------------------------------------------------------|:------------|:----------------------------------------|
| `size` | `"link" \| "sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button |
| `border` | `"none" \| "solid" \| "success" \| "warning" \| "danger"` | `"solid"` | The border color of the button |
| `background` | `"default" \| "ghost" \| "success" \| "warning" \| "danger" \| "transparent"` | `"default"` | The background color of the button |
| `decoration` | `"none" \| "link"` | `"none"` | The inner text decoration of the button |
| `presets` | `"default" \| "ghost" \| "link" \| "success" \| "warning" \| "danger"` | `"default"` | The preset of the variant props |
### Special
| Prop | Type | Default | Description |
|:----------|:----------|:--------|:---------------------------------------------------------|
| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |
## Examples
### Default
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Default />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx`} />
</TabContent>
</TabProvider>
### Ghost
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Ghost />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx`} />
</TabContent>
</TabProvider>
### Link
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Link />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx`} />
</TabContent>
</TabProvider>
### Success
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Success />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx`} />
</TabContent>
</TabProvider>
### Warning
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Warning />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx`} />
</TabContent>
</TabProvider>
### Danger
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Danger />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx`} />
</TabContent>
</TabProvider>

5
packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Danger = () => {
return <Button preset="danger">Danger</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Default = () => {
return <Button preset="default">Default</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Ghost = () => {
return <Button preset="ghost">Ghost</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Link = () => {
return <Button preset="link">Link</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Success = () => {
return <Button preset="success">Success</Button>;
};

5
packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export const Warning = () => {
return <Button preset="warning">Warning</Button>;
};

16
packages/react/src/docs/components/ButtonBlocks/Examples/index.ts Normal file
View File

@ -0,0 +1,16 @@
import { Danger } from "./Danger";
import { Warning } from "./Warning";
import { Success } from "./Success";
import { Link } from "./Link";
import { Ghost } from "./Ghost";
import { Default } from "./Default";
export default {
Danger,
Warning,
Success,
Link,
Ghost,
Default,
};

5
packages/react/src/docs/components/ButtonBlocks/Preview.tsx Normal file
View File

@ -0,0 +1,5 @@
import { Button } from "@components/Button";
export function ButtonDemo() {
return <Button>Button</Button>;
}

84
packages/react/src/docs/components/Checkbox.mdx Normal file
View File

@ -0,0 +1,84 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
import { CheckboxDemo } from "./CheckboxBlocks/Preview";
import Examples from "./CheckboxBlocks/Examples";
# Checkbox
A control that allows the user to toggle between checked and not checked.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<CheckboxDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
## Installation
1. Create a new file `Checkbox.mdx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={`${GITHUB}/packages/react/components/Checkbox.tsx`} />
## Usage
```tsx
import { Checkbox } from "@components/Checkbox";
```
```html
<Checkbox />
```
## Props
### Variants
| Prop | Type | Default | Description |
|:-------|:-------------------------|:--------|:-------------------------|
| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
## Examples
### Text
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Text />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Examples/Text.tsx`} />
</TabContent>
</TabProvider>
### Disabled
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Disabled />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx`} />
</TabContent>
</TabProvider>

11
packages/react/src/docs/components/CheckboxBlocks/Examples/Disabled.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function Disabled() {
return (
<Label direction="horizontal">
<Checkbox size="base" disabled />
<span>Agree terms and conditions</span>
</Label>
);
}

11
packages/react/src/docs/components/CheckboxBlocks/Examples/Text.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Label } from "@components/Label";
import { Checkbox } from "@components/Checkbox";
export function Text() {
return (
<Label direction="horizontal">
<Checkbox size="base" />
<span>Agree terms and conditions</span>
</Label>
);
}

5
packages/react/src/docs/components/CheckboxBlocks/Examples/index.ts Normal file
View File

@ -0,0 +1,5 @@
import { Text } from "./Text";
import { Disabled } from "./Disabled";
export default { Text, Disabled };

11
packages/react/src/docs/components/CheckboxBlocks/Preview.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Checkbox } from "@components/Checkbox";
import { Label } from "@components/Label";
export function CheckboxDemo() {
return (
<Label direction="horizontal">
<Checkbox />
<span>Checkbox</span>
</Label>
);
}

177
packages/react/src/docs/components/Dialog.mdx Normal file
View File

@ -0,0 +1,177 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
import { DialogDemo } from "./DialogBlocks/Preview";
import Examples from "./DialogBlocks/Examples";
# Dialog
A modal window that prompts the user to take an action or provides critical information.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<DialogDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
## Installation
1. Create a new file `Dialog.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={`${GITHUB}/packages/react/components/Dialog.tsx`} />
## Usage
```tsx
import {
DialogRoot,
DialogTrigger,
DialogOverlay,
DialogContent,
DialogHeader,
DialogTitle,
DialogSubtitle,
DialogFooter,
DialogClose,
} from "@components/Dialog";
```
```html
<DialogRoot>
<DialogTrigger>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogOverlay>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
</DialogHeader>
{/* Main Contents */}
<DialogFooter>
<DialogClose>
<Button>Close</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</DialogOverlay>
</DialogRoot>
```
> Note:
>
> DialogTrigger and DialogClose will merge its onClick event handler to its children.
> Also, there is no default element for those.
> So you always have to provide the clickable children for DialogTrigger and DialogClose.
>
> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
## Props
### DialogOverlay
#### Variants
| Prop | Type | Default | Description |
|:----------|:-----------------------|:--------|:---------------------------------------------|
| `blur` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is blurred |
| `darken` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is darkened |
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Minimum margin of the dialog |
#### Special
| Prop | Type | Default | Description |
|:---------------|:----------|:--------|:-----------------------------------------------|
| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |
### DialogContent
#### Variants
| Prop | Type | Default | Description |
|:----------|:---------------------------------------------------------------------|:--------|:-----------------------------------------------|
| `size` | `"fit" \| "fullSm" \| "fullMd" \| "fullLg" \| "fullXl" \| "full2xl"` | `fit` | Size of the dialog - width and max width |
| `rounded` | `"sm" \| "md" \| "lg" \| "xl"` | `md` | Roundness of the dialog |
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Padding of the dialog |
| `gap` | `"sm" \| "md" \| "lg"` | `md` | Works like flex's gap - space between children |
### DialogHeader
#### Variants
| Prop | Type | Default | Description |
|:------|:-----------------------|:--------|:----------------------------------------------|
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children - title and subtitle |
### DialogTitle
#### Variants
| Prop | Type | Default | Description |
|:---------|:-----------------------|:--------|:--------------------|
| `size` | `"sm" \| "md" \| "lg"` | `md` | Size of the title |
| `weight` | `"sm" \| "md" \| "lg"` | `lg` | Weight of the title |
### DialogSubtitle
#### Variants
| Prop | Type | Default | Description |
|:----------|:-----------------------|:--------|:------------------------|
| `size` | `"sm" \| "md" \| "lg"` | `sm` | Size of the subtitle |
| `weight` | `"sm" \| "md" \| "lg"` | `md` | Weight of the subtitle |
| `opacity` | `"sm" \| "md" \| "lg"` | `sm` | Opacity of the subtitle |
### DialogFooter
#### Variants
| Prop | Type | Default | Description |
|:------|:-----------------------|:--------|:-------------------------|
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children |
## Examples
### Basic Informational Dialog
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.BasicInformationalDialog />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx`} />
</TabContent>
</TabProvider>
### Deleting Item
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.DeletingItem />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx`} />
</TabContent>
</TabProvider>

36
packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Button } from "@components/Button";
import {
DialogRoot,
DialogTrigger,
DialogOverlay,
DialogContent,
DialogHeader,
DialogTitle,
DialogSubtitle,
DialogFooter,
DialogClose,
} from "@components/Dialog";
export function BasicInformationalDialog() {
return (
<DialogRoot>
<DialogTrigger>
<Button preset="default">What is this?</Button>
</DialogTrigger>
<DialogOverlay>
<DialogContent size={"fullMd"}>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
</DialogHeader>
<p>This is a dialog. You can put the information you want to show.</p>
<DialogFooter>
<DialogClose>
<Button preset="default">Ok!</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</DialogOverlay>
</DialogRoot>
);
}

79
packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx Normal file
View File

@ -0,0 +1,79 @@
import {
DialogRoot,
DialogTrigger,
DialogOverlay,
DialogContent,
DialogHeader,
DialogTitle,
DialogSubtitle,
DialogFooter,
DialogClose,
} from "@components/Dialog";
import { Button } from "@components/Button";
import { useToast } from "@components/Toast";
export function DeletingItem() {
const { toast } = useToast();
return (
<DialogRoot>
<DialogTrigger>
<Button preset="danger">Delete Item</Button>
</DialogTrigger>
<DialogOverlay>
<DialogContent size={"fullMd"}>
<DialogHeader>
<DialogTitle>Delete Item</DialogTitle>
<DialogSubtitle>
Are you sure you want to delete this item?
</DialogSubtitle>
</DialogHeader>
<div className="flex flex-col gap-3">
<ul className="list-disc list-inside">
<li>This action will delete the item, and related data</li>
<li>This action cannot be undone</li>
</ul>
</div>
<DialogFooter>
<DialogClose>
<Button
preset="danger"
onClick={async () => {
const toasted = toast({
title: "Deleting Item",
description: "Item deletion is requested",
status: "loading",
});
await new Promise((r) => setTimeout(r, 1000));
toasted.update({
title: "Item Deleted",
description: "The item has been deleted",
status: "success",
});
}}
>
Delete
</Button>
</DialogClose>
<DialogClose>
<Button
preset="default"
onClick={() => {
toast({
title: "Action Canceled",
description: "The delete action has been canceled",
status: "error",
});
}}
>
Cancel
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</DialogOverlay>
</DialogRoot>
);
}

8
packages/react/src/docs/components/DialogBlocks/Examples/index.ts Normal file
View File

@ -0,0 +1,8 @@
import { BasicInformationalDialog } from "./BasicInformationalDialog";
import { DeletingItem } from "./DeletingItem";
export default {
BasicInformationalDialog,
DeletingItem,
}

42
packages/react/src/docs/components/DialogBlocks/Preview.tsx Normal file
View File

@ -0,0 +1,42 @@
import {
DialogRoot,
DialogTrigger,
DialogOverlay,
DialogContent,
DialogHeader,
DialogTitle,
DialogSubtitle,
DialogFooter,
DialogClose,
} from "@components/Dialog";
import { Button } from "@components/Button";
export function DialogDemo() {
return (
<DialogRoot>
<DialogTrigger>
<Button preset="default">Open Dialog</Button>
</DialogTrigger>
<DialogOverlay>
<DialogContent size={"fullMd"}>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
</DialogHeader>
<p>
Laborum non adipisicing enim enim culpa esse anim esse consequat
Lorem incididunt. Enim mollit laborum sunt cillum voluptate est
officia nostrud non consequat adipisicing cupidatat aliquip magna.
Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat labore
pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
</p>
<DialogFooter>
<DialogClose>
<Button preset="default">Close</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</DialogOverlay>
</DialogRoot>
);
}

Some files were not shown because too many files have changed in this diff Show More