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.4.1
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.4.1" have entirely different histories.
main ... cli@0.4.1

67 changed files with 4048 additions and 2966 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

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>

9
.vscode/settings.json vendored
View File

@ -1,6 +1,7 @@
{ {
"tailwindCSS.experimental.classRegex": [ "tailwindCSS.experimental.classRegex": [
["vcn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], ["vcn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["[cC]olors\\s*\\=\\s*{([^]*(?=}))}", "[\"'`]([^\"'`]*).*?[\"'`]"] ["[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 # 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 ## Milestones
@ -62,6 +15,11 @@ If you have any ideas or suggestions, please let me know in [Github Issues](http
- [ ] FileInput - [ ] FileInput
- [ ] ImageInput - [ ] ImageInput
- [ ] Form - [ ] Form
- [ ] FormItem
- [ ] FormLabel
- [ ] FormControl
- [ ] FormDescription
- [ ] FormMessage
- [ ] Textarea - [ ] Textarea
- [ ] Accordion - [ ] Accordion
- [ ] Alert - [ ] Alert
@ -95,35 +53,24 @@ If you have any ideas or suggestions, please let me know in [Github Issues](http
- [ ] Toggle - [ ] Toggle
- [ ] Toggle Group - [ ] Toggle Group
- [x] Tooltip - [x] Tooltip
- Library/Framework Support
- [ ] React
- [ ] Svelte
- CLI - CLI
- [x] Add - [x] Add
- [x] List - [x] List
- [x] Search
## Building local development environment ## Building local development environment
```bash ```bash
# Corepack - Yarn 4.2.2 # Corepack - Yarn 4.2.2
corepack enable corepack enable
corepack install yarn@4.2.2
corepack use yarn@4.2.2
# Install Packages # Install Packages
yarn install yarn install
# Script running in workspace # Run Storybook
yarn react dev # `yarn dev` in react workspace yarn workspace react storybook
yarn cli build # `yarn build` in cli workspace
``` ```
## 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", "repository": "https://github.com/pswui/ui",
"author": "p-sw <shinwoo.park@psw.kr>", "author": "p-sw <shinwoo.park@psw.kr>",
"license": "MIT", "license": "MIT",
"workspaces": ["packages/*", "components"], "workspaces": [
"packages/*",
"components"
],
"scripts": { "scripts": {
"postinstall": "lefthook install",
"react": "yarn workspace react", "react": "yarn workspace react",
"cli": "yarn workspace @psw-ui/cli", "cli": "yarn workspace @psw-ui/cli",
"react:build": "yarn workspace react build", "react:build": "yarn workspace react build",
@ -15,9 +17,5 @@
"cli:build": "yarn workspace @psw-ui/cli build" "cli:build": "yarn workspace @psw-ui/cli build"
}, },
"private": true, "private": true,
"packageManager": "yarn@4.4.0+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb", "packageManager": "yarn@4.2.2+sha512.c44e283c54e02de9d1da8687025b030078c1b9648d2895a65aab8e64225bfb7becba87e1809fc0b4b6778bbd47a1e2ab6ac647de4c5e383a53a7c17db6c3ff4b"
"devDependencies": {
"@biomejs/biome": "1.8.3",
"lefthook": "^1.6.18"
}
} }

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"], "require": [
"watch-extensions": ["ts"], "ts-node/register"
],
"watch-extensions": [
"ts"
],
"recursive": true, "recursive": true,
"reporter": "spec", "reporter": "spec",
"timeout": 60000, "timeout": 60000,

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

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

14
packages/cli/README.md
View File

@ -20,7 +20,7 @@ $ npm install -g @psw-ui/cli
$ pswui COMMAND $ pswui COMMAND
running command... running command...
$ pswui (--version) $ 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] $ pswui --help [COMMAND]
USAGE USAGE
$ pswui COMMAND $ pswui COMMAND
@ -49,7 +49,7 @@ FLAGS
-c, --components=<value> place for installation of components -c, --components=<value> place for installation of components
-f, --force override the existing file -f, --force override the existing file
-p, --config=<value> path to config -p, --config=<value> path to config
-r, --branch=<value> use other branch instead of main -r, --registry=<value> override registry ur
-s, --shared=<value> place for installation of shared.ts -s, --shared=<value> place for installation of shared.ts
DESCRIPTION DESCRIPTION
@ -59,7 +59,7 @@ EXAMPLES
$ pswui add $ 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.4.1/packages/cli/src/commands/add.tsx)_
## `pswui help [COMMAND]` ## `pswui help [COMMAND]`
@ -91,7 +91,7 @@ USAGE
FLAGS FLAGS
-p, --config=<value> path to config -p, --config=<value> path to config
-r, --branch=<value> use other branch instead of main -r, --registry=<value> override registry url
-u, --url include component file URL -u, --url include component file URL
DESCRIPTION DESCRIPTION
@ -101,7 +101,7 @@ EXAMPLES
$ pswui list $ 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.4.1/packages/cli/src/commands/list.ts)_
## `pswui search` ## `pswui search`
@ -117,7 +117,7 @@ ARGUMENTS
QUERY search query QUERY search query
FLAGS FLAGS
-r, --branch=<value> use other branch instead of main -r, --registry=<value> override registry url
DESCRIPTION DESCRIPTION
Search components. Search components.
@ -126,5 +126,5 @@ EXAMPLES
$ pswui search $ 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.4.1/packages/cli/src/commands/search.tsx)_
<!-- commandsstop --> <!-- 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 #!/usr/bin/env -S node --loader ts-node/esm --no-warnings=ExperimentalWarning
// eslint-disable-next-line n/shebang // 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 #!/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})

23
packages/cli/package.json
View File

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

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

@ -1,43 +1,35 @@
import { existsSync } from "node:fs"; import {Args, Command, Flags} from '@oclif/core'
import { mkdir, writeFile } from "node:fs/promises"; import {loadConfig, validateConfig} from '../helpers/config.js'
import { join } from "node:path"; import {existsSync} from 'node:fs'
import { Args, Command, Flags } from "@oclif/core"; import {mkdir, writeFile} from 'node:fs/promises'
import { colorize } from "@oclif/core/ux"; import {join, dirname} from 'node:path'
import { Box, render } from "ink"; import {getAvailableComponentNames, getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
import ora from "ora"; import ora from 'ora'
import React, { type ComponentPropsWithoutRef } from "react"; import React, {ComponentPropsWithoutRef} from 'react'
import { Choice } from "../components/Choice.js"; import {render, Box} from 'ink'
import { SearchBox } from "../components/SearchBox.js"; import {SearchBox} from '../components/SearchBox.js'
import { loadConfig, validateConfig } from "../helpers/config.js"; import {getComponentsInstalled} from '../helpers/path.js'
import { import {Choice} from '../components/Choice.js'
checkComponentInstalled, import {colorize} from '@oclif/core/ux'
getDirComponentRequiredFiles,
} from "../helpers/path.js";
import {
getComponentURL,
getDirComponentURL,
getRegistry,
} from "../helpers/registry.js";
import { safeFetch } from "../helpers/safe-fetcher.js";
function Generator() { function Generator() {
let complete = false; let complete: boolean = false
function ComponentSelector< function ComponentSelector<T extends {displayName: string; key: string; installed: boolean}>(
T extends { displayName: string; key: string; installed: boolean }, props: Omit<ComponentPropsWithoutRef<typeof SearchBox<T>>, 'helper'>,
>(props: Omit<ComponentPropsWithoutRef<typeof SearchBox<T>>, "helper">) { ) {
return ( return (
<Box> <Box>
<SearchBox <SearchBox
helper={"Press Enter to select component."} helper={'Press Enter to select component.'}
{...props} {...props}
onSubmit={(value) => { onSubmit={(value) => {
complete = true; complete = true
props.onSubmit?.(value); props.onSubmit?.(value)
}} }}
/> />
</Box> </Box>
); )
} }
return [ return [
@ -45,31 +37,29 @@ function Generator() {
new Promise<void>((r) => { new Promise<void>((r) => {
const i = setInterval(() => { const i = setInterval(() => {
if (complete) { if (complete) {
r(); r()
clearInterval(i); clearInterval(i)
} }
}, 100); }, 100)
}), }),
] as const; ] as const
} }
function Generator2() { function Generator2() {
let complete = false; let complete = false
function ForceSelector({ function ForceSelector({onComplete}: {onComplete: (value: 'yes' | 'no') => void}) {
onComplete,
}: { onComplete: (value: "yes" | "no") => void }) {
return ( return (
<Choice <Choice
question={"You already installed this component. Overwrite?"} question={'You already installed this component. Overwrite?'}
yes={"Yes, overwrite existing file and install it."} yes={'Yes, overwrite existing file and install it.'}
no={"No, cancel the action."} no={'No, cancel the action.'}
onSubmit={(value) => { onSubmit={(value) => {
complete = true; complete = true
onComplete(value); onComplete(value)
}} }}
/> />
); )
} }
return [ return [
@ -77,237 +67,157 @@ function Generator2() {
new Promise<void>((r) => { new Promise<void>((r) => {
const i = setInterval(() => { const i = setInterval(() => {
if (complete) { if (complete) {
r(); r()
clearInterval(i); clearInterval(i)
} }
}, 100); }, 100)
}), }),
] as const; ] as const
} }
export default class Add extends Command { export default class Add extends Command {
static override args = { 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 = { static override flags = {
branch: Flags.string({ registry: Flags.string({char: 'r', description: 'override registry url'}),
char: "r", force: Flags.boolean({char: 'f', description: 'override the existing file'}),
description: "use other branch instead of main", config: Flags.string({char: 'p', description: 'path to config'}),
}), shared: Flags.string({char: 's', description: 'place for installation of shared.ts'}),
force: Flags.boolean({ components: Flags.string({char: 'c', description: 'place for installation of components'}),
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> { public async run(): Promise<void> {
let { let {
args, args,
flags: { force, ...flags }, flags: {force, ...flags},
} = await this.parse(Add); } = await this.parse(Add)
const resolvedConfig = await validateConfig( const resolvedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
(message: string) => this.log(message), const componentFolder = join(process.cwd(), resolvedConfig.paths.components)
await loadConfig(flags.config), const libFile = join(process.cwd(), resolvedConfig.paths.lib)
);
const componentFolder = join(
process.cwd(),
resolvedConfig.paths.components,
);
const libFolder = join(process.cwd(), resolvedConfig.paths.lib);
if (!existsSync(componentFolder)) { if (!existsSync(componentFolder)) {
await mkdir(componentFolder, { recursive: true }); await mkdir(componentFolder, {recursive: true})
} }
if (!existsSync(libFolder)) { if (!existsSync(dirname(libFile))) {
await mkdir(libFolder, { recursive: true }); await mkdir(dirname(libFile), {recursive: true})
} }
const loadRegistryOra = ora("Fetching registry...").start(); const loadRegistryOra = ora('Fetching registry...').start()
if (flags.registry) { if (flags.registry) {
this.log(`Using ${flags.branch} for branch.`); this.log(`Using ${flags.registry} for registry.`)
} }
const unsafeRegistry = await getRegistry(flags.branch); const unsafeRegistry = await getRegistry(flags.registry)
if (!unsafeRegistry.ok) { if (!unsafeRegistry.ok) {
loadRegistryOra.fail(unsafeRegistry.message); loadRegistryOra.fail(unsafeRegistry.message)
return; 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,
key: name,
installed,
});
} }
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.includes(componentRealNames[index]),
}))
let name: string | undefined = args.name?.toLowerCase?.(); let name: string | undefined = args.name?.toLowerCase?.()
let requireForce: boolean = let requireForce: boolean =
!name || !componentNames.includes(name.toLowerCase()) !name || !componentNames.includes(name.toLowerCase())
? false ? false
: searchBoxComponent.find(({ key }) => key === name)?.installed : searchBoxComponent.find(({key}) => key === name)?.installed
? !force ? !force
: false; : false
if (!name || !componentNames.includes(name.toLowerCase())) { if (!name || !componentNames.includes(name.toLowerCase())) {
const [ComponentSelector, waitForComplete] = Generator(); const [ComponentSelector, waitForComplete] = Generator()
const inkInstance = render( const inkInstance = render(
<ComponentSelector <ComponentSelector
components={searchBoxComponent} components={searchBoxComponent}
initialQuery={args.name} initialQuery={args.name}
onSubmit={(comp) => { onSubmit={(comp) => {
name = comp.key; name = comp.key
requireForce = comp.installed; requireForce = comp.installed
inkInstance.clear(); inkInstance.clear()
}} }}
/>, />,
); )
await waitForComplete; await waitForComplete
inkInstance.unmount(); inkInstance.unmount()
} }
let quit = false; let quit = false
if (requireForce) { if (requireForce) {
const [ForceSelector, waitForComplete] = Generator2(); const [ForceSelector, waitForComplete] = Generator2()
const inkInstance = render( const inkInstance = render(
<ForceSelector <ForceSelector
onComplete={(value) => { onComplete={(value) => {
force = value === "yes"; force = value === 'yes'
quit = value === "no"; quit = value === 'no'
inkInstance.clear(); inkInstance.clear()
}} }}
/>, />,
); )
await waitForComplete; await waitForComplete
inkInstance.unmount(); inkInstance.unmount()
if (quit) { if (quit) {
this.log(colorize("redBright", "Installation canceled by user.")); this.log(colorize('redBright', 'Installation canceled by user.'))
return; return
} }
} }
if (!name || !componentNames.includes(name.toLowerCase())) { 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(); const libFileOra = ora('Installing required library...').start()
let successCount = 0; if (!existsSync(libFile)) {
for await (const libFile of registry.lib) { const libFileContentResponse = await fetch(registry.base + registry.paths.lib)
const filePath = join(libFolder, libFile); if (!libFileContentResponse.ok) {
if (!existsSync(filePath)) { libFileOra.fail(
const libFileContentResponse = await safeFetch( `Error while fetching library content: ${libFileContentResponse.status} ${libFileContentResponse.statusText}`,
registry.base + registry.paths.lib.replace("{libName}", libFile), )
); return
if (!libFileContentResponse.ok) {
libFileOra.fail(libFileContentResponse.message);
return;
}
const libFileContent = await libFileContentResponse.response.text();
await writeFile(filePath, libFileContent);
successCount++;
} }
} const libFileContent = await libFileContentResponse.text()
if (successCount > 1) { await writeFile(libFile, libFileContent)
libFileOra.succeed("Successfully installed library files!"); libFileOra.succeed('Library is successfully installed!')
} else { } else {
libFileOra.succeed("Library files are already installed!"); libFileOra.succeed('Library is already installed!')
} }
const componentFileOra = ora(`Installing ${name} component...`).start(); const componentFileOra = ora(`Installing ${name} component...`).start()
const componentObject = registry.components[name]; const componentFile = join(componentFolder, registry.components[name].name)
if (componentObject.type === "file") { if (existsSync(componentFile) && !force) {
const componentFile = join( componentFileOra.succeed(`Component is already installed! (${componentFile})`)
componentFolder, } else {
registry.components[name].name, const componentFileContentResponse = await fetch(await getComponentURL(registry, name))
); if (!componentFileContentResponse.ok) {
if (existsSync(componentFile) && !force) { componentFileOra.fail(
componentFileOra.succeed( `Error while fetching component file content: ${componentFileContentResponse.status} ${componentFileContentResponse.statusText}`,
`Component is already installed! (${componentFile})`, )
); return
} else {
const componentFileContentResponse = await safeFetch(
await getComponentURL(registry, componentObject),
);
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!");
} }
const componentFileContent = (await componentFileContentResponse.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!')
} }
this.log("Now you can import the component."); this.log('Now you can import the component.')
} }
} }

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

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

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

@ -1,45 +1,42 @@
import { Args, Command, Flags } from "@oclif/core"; import {Command, Args, Flags} from '@oclif/core'
import { render } from "ink"; import {render} from 'ink'
import React from "react"; import {SearchBox} from '../components/SearchBox.js'
import { SearchBox } from "../components/SearchBox.js"; import {getAvailableComponentNames, getRegistry} from '../helpers/registry.js'
import { getRegistry } from "../helpers/registry.js"; import React from 'react'
export default class Search extends Command { export default class Search extends Command {
static override args = { static override args = {
query: Args.string({ description: "search query" }), query: Args.string({description: 'search query'}),
}; }
static override flags = { static override flags = {
branch: Flags.string({ registry: Flags.string({char: 'r', description: 'override registry url'})
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> { public async run(): Promise<void> {
const { args, flags } = await this.parse(Search); const {args, flags} = await this.parse(Search)
if (flags.branch) { if (flags.registry) {
this.log(`Using ${flags.branch} for registry.`); this.log(`Using ${flags.registry} for registry.`)
} }
const registryResult = await getRegistry(flags.branch); const registryResult = await getRegistry(flags.registry)
if (!registryResult.ok) { if (!registryResult.ok) {
this.error(registryResult.message); this.error(registryResult.message)
} }
const registry = registryResult.registry; const registry = registryResult.registry
const componentNames = Object.keys(registry.components); const componentNames = await getAvailableComponentNames(registry)
await render( await render(
<SearchBox <SearchBox
components={componentNames.map((v) => ({ key: v, displayName: v }))} components={componentNames.map((v) => ({key: v, displayName: v}))}
initialQuery={args.query} initialQuery={args.query}
helper={"Press ESC to quit"} helper={'Press ESC to quit'}
onKeyDown={(_, k, app) => k.escape && app.exit()} 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() { function isUnicodeSupported() {
if (process.platform !== "win32") { if (process.platform !== 'win32') {
return process.env.TERM !== "linux"; // Linux console (kernel) return process.env['TERM'] !== 'linux' // Linux console (kernel)
} }
return ( return (
Boolean(process.env.WT_SESSION) || // Windows Terminal Boolean(process.env['WT_SESSION']) || // Windows Terminal
Boolean(process.env.TERMINUS_SUBLIME) || // Terminus (<0.2.27) Boolean(process.env['TERMINUS_SUBLIME']) || // Terminus (<0.2.27)
process.env.ConEmuTask === "{cmd::Cmder}" || // ConEmu and cmder process.env['ConEmuTask'] === '{cmd::Cmder}' || // ConEmu and cmder
process.env.TERM_PROGRAM === "Terminus-Sublime" || process.env['TERM_PROGRAM'] === 'Terminus-Sublime' ||
process.env.TERM_PROGRAM === "vscode" || process.env['TERM_PROGRAM'] === 'vscode' ||
process.env.TERM === "xterm-256color" || process.env['TERM'] === 'xterm-256color' ||
process.env.TERM === "alacritty" || process.env['TERM'] === 'alacritty' ||
process.env.TERMINAL_EMULATOR === "JetBrains-JediTerm" process.env['TERMINAL_EMULATOR'] === 'JetBrains-JediTerm'
); )
} }
const shouldUseMain = isUnicodeSupported(); const shouldUseMain = isUnicodeSupported()
const SELECTED: string = shouldUseMain ? "◉" : "(*)"; const SELECTED: string = shouldUseMain ? '◉' : '(*)'
const UNSELECTED: string = shouldUseMain ? "◯" : "( )"; const UNSELECTED: string = shouldUseMain ? '◯' : '( )'
export function Choice({ export function Choice({
question, question,
@ -29,38 +29,35 @@ export function Choice({
onSubmit, onSubmit,
initial, initial,
}: { }: {
question: string; question: string
yes: string; yes: string
no: string; no: string
onSubmit?: (vaule: "yes" | "no") => void; onSubmit?: (vaule: 'yes' | 'no') => void
initial?: "yes" | "no"; initial?: 'yes' | 'no'
}) { }) {
const [state, setState] = useState<"yes" | "no">(initial ?? "yes"); const [state, setState] = useState<'yes' | 'no'>(initial ?? 'yes')
useInput((_, k) => { useInput((_, k) => {
if (k.upArrow) { if (k.upArrow) {
setState("yes"); setState('yes')
} else if (k.downArrow) { } else if (k.downArrow) {
setState("no"); setState('no')
} }
if (k.return) { if (k.return) {
onSubmit?.(state); onSubmit?.(state)
} }
}); })
return ( return (
<Box <Box display={'flex'} flexDirection={'column'}>
display={"flex"} <Text color={'greenBright'}>{question}</Text>
flexDirection={"column"} <Text color={state === 'yes' ? undefined : 'gray'}>
> {state === 'yes' ? SELECTED : UNSELECTED} {yes}
<Text color={"greenBright"}>{question}</Text>
<Text color={state === "yes" ? undefined : "gray"}>
{state === "yes" ? SELECTED : UNSELECTED} {yes}
</Text> </Text>
<Text color={state === "no" ? undefined : "gray"}> <Text color={state === 'no' ? undefined : 'gray'}>
{state === "no" ? SELECTED : UNSELECTED} {no} {state === 'no' ? SELECTED : UNSELECTED} {no}
</Text> </Text>
</Box> </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({ export function Divider({width = 50, padding = 1, title}: {width?: number; padding?: number; title: string}) {
width = 50, const length = Math.floor((width - title.length - padding * 2) / 2)
padding = 1,
title,
}: { width?: number; padding?: number; title: string }) {
const length = Math.floor((width - title.length - padding * 2) / 2);
return ( return (
<Box> <Box>
{Array.from(Array(length)).map((_, i) => ( {Array.from(Array(length)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}>─</Text> <Text key={i}>─</Text>
))} ))}
{Array.from(Array(padding)).map((_, i) => ( {Array.from(Array(padding)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}> </Text> <Text key={i}> </Text>
))} ))}
<Text>{title}</Text> <Text>{title}</Text>
{Array.from(Array(padding)).map((_, i) => ( {Array.from(Array(padding)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}> </Text> <Text key={i}> </Text>
))} ))}
{Array.from(Array(length)).map((_, i) => ( {Array.from(Array(length)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}>─</Text> <Text key={i}>─</Text>
))} ))}
</Box> </Box>
); )
} }

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

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

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

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

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

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

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

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

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

@ -1,49 +1,32 @@
import { import {REGISTRY_URL, Registry} from '../const.js'
type Registry,
type RegistryComponent,
registryURL,
} from "../const.js";
import { safeFetch } from "./safe-fetcher.js";
export async function getRegistry( export async function getRegistry(REGISTRY_OVERRIDE_URL?: string): Promise<{ok: true; registry: Registry} | {ok: false; message: string}> {
branch?: string, const registryResponse = await fetch(REGISTRY_OVERRIDE_URL ?? REGISTRY_URL)
): Promise<{ message: string; ok: false } | { ok: true; registry: Registry }> {
const registryResponse = await safeFetch(registryURL(branch ?? "main"));
if (registryResponse.ok) { if (registryResponse.ok) {
const registryJson = (await registryResponse.response.json()) as Registry;
registryJson.base = registryJson.base.replace("{branch}", branch ?? "main");
return { return {
ok: true, 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 getComponentURL( export async function getAvailableComponentNames(registry: Registry): Promise<string[]> {
return Object.keys(registry.components)
}
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, registry: Registry,
component: { type: "file" } & RegistryComponent, componentName: keyof Registry['components'],
): Promise<string> { ): Promise<string> {
return ( return registry.components[componentName].name
registry.base +
registry.paths.components.replace("{componentName}", component.name)
);
}
export async function getDirComponentURL(
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}`,
]);
} }

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

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 },
],
},
}

6
packages/react/.gitignore vendored
View File

@ -23,8 +23,4 @@ dist-ssr
*.sln *.sln
*.sw? *.sw?
*storybook.log *storybook.log
src
src/main.tsx
!src/tailwind.css

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 React from "react";
import { vcn, VariantProps, Slot, AsChild } from "@pswui-lib";
const colors = { const colors = {
disabled:
"disabled:brightness-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-50",
outline: { outline: {
focus: "dark:focus-visible:outline-white/20 focus-visible:outline-black/10", 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", danger: "border-red-400 dark:border-red-600",
}, },
background: { background: {
default: "bg-white dark:bg-black", default:
"bg-white dark:bg-black hover:bg-neutral-200 dark:hover:bg-neutral-800",
ghost: ghost:
"bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20", "bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
success: "bg-green-100 dark:bg-green-900", success:
warning: "bg-yellow-100 dark:bg-yellow-900", "bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800",
danger: "bg-red-100 dark:bg-red-900", 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", underline: "decoration-current",
}; };
const [buttonVariants, resolveVariants] = vcn({ 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: { variants: {
size: { size: {
link: "p-0 text-base", link: "p-0 text-base",
@ -108,22 +109,16 @@ export interface ButtonProps
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherPropsCompressed] = resolveVariants(props); const [variantProps, otherPropsCompressed] = resolveVariants(props);
const { asChild, type, role, ...otherPropsExtracted } = const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
otherPropsCompressed;
const Comp = asChild ? Slot : "button"; const Comp = asChild ? Slot : "button";
const compProps = {
...otherPropsExtracted,
className: buttonVariants(variantProps),
};
return ( return <Comp ref={ref} {...compProps} />;
<Comp
ref={ref}
type={type ?? "button"}
className={buttonVariants(variantProps)}
role={role ?? "button"}
{...otherPropsExtracted}
/>
);
}, },
); );
Button.displayName = "Button";
export { 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 React from "react";
import { VariantProps, vcn } from "@pswui-lib";
const checkboxColors = { const checkboxColors = {
background: { background: {
@ -18,10 +18,12 @@ const checkboxColors = {
disabledCheckedHover: disabledCheckedHover:
"has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-700", "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({ 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: { variants: {
size: { size: {
base: "size-[1em] p-0 [&>svg]:size-[1em]", 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> </label>
</> </>
); );
}, },
); );
Checkbox.displayName = "Checkbox";
export { Checkbox }; export { Checkbox };

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

@ -1,21 +1,32 @@
import { import React, { Dispatch, SetStateAction, useState } from "react";
Slot, import { Slot, VariantProps, vcn } from "@pswui-lib";
type VariantProps,
useAnimatedMount,
useDocument,
vcn,
} from "@pswui-lib";
import React, { type ReactNode, useId, useRef, useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { /**
DialogContext, * =========================
type IDialogContext, * DialogContext
InnerDialogContext, * =========================
*/
interface DialogContext {
opened: boolean;
}
const initialDialogContext: DialogContext = { opened: false };
const DialogContext = React.createContext<
[DialogContext, Dispatch<SetStateAction<DialogContext>>]
>([
initialDialogContext, initialDialogContext,
useDialogContext, () => {
useInnerDialogContext, if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
} from "./Context"; 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 DialogRoot = ({ children }: DialogRootProps) => {
const state = useState<IDialogContext>({ const state = useState<DialogContext>(initialDialogContext);
...initialDialogContext,
ids: { dialog: useId(), title: useId(), description: useId() },
});
return ( return (
<DialogContext.Provider value={state}>{children}</DialogContext.Provider> <DialogContext.Provider value={state}>{children}</DialogContext.Provider>
); );
@ -48,17 +56,15 @@ interface DialogTriggerProps {
} }
const DialogTrigger = ({ children }: DialogTriggerProps) => { const DialogTrigger = ({ children }: DialogTriggerProps) => {
const [{ ids }, setState] = useDialogContext(); const [_, setState] = useDialogContext();
const onClick = () => setState((p) => ({ ...p, opened: true })); const onClick = () => setState((p) => ({ ...p, opened: true }));
return ( const slotProps = {
<Slot onClick,
onClick={onClick} children,
aria-controls={ids.dialog} };
>
{children} return <Slot {...slotProps} />;
</Slot>
);
}; };
/** /**
@ -68,15 +74,33 @@ const DialogTrigger = ({ children }: DialogTriggerProps) => {
*/ */
const [dialogOverlayVariant, resolveDialogOverlayVariant] = vcn({ 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: { variants: {
opened: { opened: {
true: "pointer-events-auto opacity-100", true: "pointer-events-auto opacity-100",
false: "pointer-events-none opacity-0", 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: { defaults: {
opened: false, opened: false,
blur: "md",
darken: "md",
padding: "md",
}, },
}); });
@ -88,36 +112,20 @@ interface DialogOverlay
const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>( const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
(props, ref) => { (props, ref) => {
const [{ opened, ids }, setContext] = useDialogContext(); const [{ opened }, setContext] = useDialogContext();
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] = resolveDialogOverlayVariant({
resolveDialogOverlayVariant(props); ...props,
opened,
});
const { children, closeOnClick, onClick, ...otherPropsExtracted } = const { children, closeOnClick, onClick, ...otherPropsExtracted } =
otherPropsCompressed; otherPropsCompressed;
return (
const internalRef = useRef<HTMLDivElement | null>(null); <>
{ReactDOM.createPortal(
const { isMounted, isRendered } = useAnimatedMount(opened, internalRef);
const document = useDocument();
if (!document) return null;
return isMounted
? ReactDOM.createPortal(
<div <div
{...otherPropsExtracted} {...otherPropsExtracted}
id={ids.dialog} ref={ref}
ref={(el) => { className={dialogOverlayVariant(variantProps)}
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
className={dialogOverlayVariant({
...variantProps,
opened: isRendered,
})}
onClick={(e) => { onClick={(e) => {
if (closeOnClick) { if (closeOnClick) {
setContext((p) => ({ ...p, opened: false })); setContext((p) => ({ ...p, opened: false }));
@ -125,23 +133,14 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
onClick?.(e); onClick?.(e);
}} }}
> >
{/* Layer for overflow positioning */} {children}
<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>, </div>,
document.body, document.body,
) )}
: null; </>
);
}, },
); );
DialogOverlay.displayName = "DialogOverlay";
/** /**
* ========================= * =========================
@ -150,51 +149,69 @@ DialogOverlay.displayName = "DialogOverlay";
*/ */
const [dialogContentVariant, resolveDialogContentVariant] = vcn({ 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: { variants: {
opened: { opened: {
true: "scale-100", true: "scale-100",
false: "scale-50", 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: { defaults: {
opened: false, opened: false,
size: "fit",
rounded: "md",
padding: "md",
gap: "md",
}, },
}); });
interface DialogContentProps interface DialogContent
extends React.ComponentPropsWithoutRef<"div">, extends React.ComponentPropsWithoutRef<"div">,
Omit<VariantProps<typeof dialogContentVariant>, "opened"> {} Omit<VariantProps<typeof dialogContentVariant>, "opened"> {}
const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>( const DialogContent = React.forwardRef<HTMLDivElement, DialogContent>(
(props, ref) => { (props, ref) => {
const [{ ids }] = useDialogContext(); const [{ opened }] = useDialogContext();
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] = resolveDialogContentVariant({
resolveDialogContentVariant(props); ...props,
const { isRendered } = useInnerDialogContext(); opened,
const { children, onClick, ...otherPropsExtracted } = otherPropsCompressed; });
const { children, ...otherPropsExtracted } = otherPropsCompressed;
return ( return (
<div <div
{...otherPropsExtracted} {...otherPropsExtracted}
ref={ref} ref={ref}
role="dialog" className={dialogContentVariant(variantProps)}
aria-labelledby={ids.title}
aria-describedby={ids.description}
className={dialogContentVariant({
...variantProps,
opened: isRendered,
})}
onClick={(e) => {
e.stopPropagation();
onClick?.(e);
}}
> >
{children} {children}
</div> </div>
); );
}, },
); );
DialogContent.displayName = "DialogContent";
/** /**
* ========================= * =========================
@ -225,9 +242,17 @@ const DialogClose = ({ children }: DialogCloseProps) => {
*/ */
const [dialogHeaderVariant, resolveDialogHeaderVariant] = vcn({ const [dialogHeaderVariant, resolveDialogHeaderVariant] = vcn({
base: "flex flex-col gap-2", base: "flex flex-col",
variants: {}, variants: {
defaults: {}, gap: {
sm: "gap-2",
md: "gap-4",
lg: "gap-6",
},
},
defaults: {
gap: "sm",
},
}); });
interface DialogHeaderProps interface DialogHeaderProps
@ -251,8 +276,6 @@ const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
}, },
); );
DialogHeader.displayName = "DialogHeader";
/** /**
* ========================= * =========================
* DialogTitle / DialogSubtitle * DialogTitle / DialogSubtitle
@ -260,69 +283,91 @@ DialogHeader.displayName = "DialogHeader";
*/ */
const [dialogTitleVariant, resolveDialogTitleVariant] = vcn({ const [dialogTitleVariant, resolveDialogTitleVariant] = vcn({
base: "text-xl font-bold", variants: {
variants: {}, size: {
defaults: {}, 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 interface DialogTitleProps
extends React.ComponentPropsWithoutRef<"h1">, extends React.ComponentPropsWithoutRef<"h1">,
VariantProps<typeof dialogTitleVariant> {} VariantProps<typeof dialogTitleVariant> {}
const [dialogDescriptionVariant, resolveDialogDescriptionVariant] = vcn({ const [dialogSubtitleVariant, resolveDialogSubtitleVariant] = vcn({
base: "text-sm opacity-60 font-normal", variants: {
variants: {}, size: {
defaults: {}, 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">, extends React.ComponentPropsWithoutRef<"h2">,
VariantProps<typeof dialogDescriptionVariant> {} VariantProps<typeof dialogSubtitleVariant> {}
const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>( const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] =
resolveDialogTitleVariant(props); resolveDialogTitleVariant(props);
const { children, ...otherPropsExtracted } = otherPropsCompressed; const { children, ...otherPropsExtracted } = otherPropsCompressed;
const [{ ids }] = useDialogContext();
return ( return (
<h1 <h1
{...otherPropsExtracted} {...otherPropsExtracted}
ref={ref} ref={ref}
className={dialogTitleVariant(variantProps)} className={dialogTitleVariant(variantProps)}
id={ids.title}
> >
{children} {children}
</h1> </h1>
); );
}, },
); );
DialogTitle.displayName = "DialogTitle";
const DialogDescription = React.forwardRef< const DialogSubtitle = React.forwardRef<
HTMLHeadingElement, HTMLHeadingElement,
DialogDescriptionProps DialogSubtitleProps
>((props, ref) => { >((props, ref) => {
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] =
resolveDialogDescriptionVariant(props); resolveDialogSubtitleVariant(props);
const { children, ...otherPropsExtracted } = otherPropsCompressed; const { children, ...otherPropsExtracted } = otherPropsCompressed;
const [{ ids }] = useDialogContext();
return ( return (
<h2 <h2
{...otherPropsExtracted} {...otherPropsExtracted}
ref={ref} ref={ref}
className={dialogDescriptionVariant(variantProps)} className={dialogSubtitleVariant(variantProps)}
id={ids.description}
> >
{children} {children}
</h2> </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({ const [dialogFooterVariant, resolveDialogFooterVariant] = vcn({
base: "flex w-full flex-col items-end sm:flex-row sm:items-center sm:justify-end gap-2", base: "flex flex-col items-end sm:flex-row sm:items-center sm:justify-end",
variants: {}, variants: {
defaults: {}, gap: {
sm: "gap-2",
md: "gap-4",
lg: "gap-6",
},
},
defaults: {
gap: "md",
},
}); });
interface DialogFooterProps interface DialogFooterProps
@ -346,46 +399,19 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
resolveDialogFooterVariant(props); resolveDialogFooterVariant(props);
const { children, ...otherPropsExtracted } = otherPropsCompressed; const { children, ...otherPropsExtracted } = otherPropsCompressed;
return ( return (
<footer <div
{...otherPropsExtracted} {...otherPropsExtracted}
ref={ref} ref={ref}
className={dialogFooterVariant(variantProps)} className={dialogFooterVariant(variantProps)}
> >
{children} {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 { export {
useDialogContext,
DialogRoot, DialogRoot,
DialogTrigger, DialogTrigger,
DialogOverlay, DialogOverlay,
@ -394,7 +420,5 @@ export {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogSubtitle, DialogSubtitle,
DialogDescription,
DialogFooter, 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";

170
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, { import React, {
type ComponentPropsWithoutRef, ComponentPropsWithoutRef,
type TouchEvent as ReactTouchEvent, TouchEvent as ReactTouchEvent,
forwardRef, forwardRef,
useContext, useContext,
useEffect, useEffect,
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
interface IDrawerContext { interface IDrawerContext {
@ -22,8 +15,6 @@ interface IDrawerContext {
closeThreshold: number; closeThreshold: number;
movePercentage: number; movePercentage: number;
isDragging: boolean; isDragging: boolean;
isMounted: boolean;
isRendered: boolean;
leaveWhileDragging: boolean; leaveWhileDragging: boolean;
} }
const DrawerContextInitial: IDrawerContext = { const DrawerContextInitial: IDrawerContext = {
@ -31,8 +22,6 @@ const DrawerContextInitial: IDrawerContext = {
closeThreshold: 0.3, closeThreshold: 0.3,
movePercentage: 0, movePercentage: 0,
isDragging: false, isDragging: false,
isMounted: false,
isRendered: false,
leaveWhileDragging: false, leaveWhileDragging: false,
}; };
const DrawerContext = React.createContext< const DrawerContext = React.createContext<
@ -60,15 +49,14 @@ const DrawerRoot = ({ children, closeThreshold, opened }: DrawerRootProps) => {
opened: opened ?? DrawerContextInitial.opened, opened: opened ?? DrawerContextInitial.opened,
closeThreshold: closeThreshold ?? DrawerContextInitial.closeThreshold, closeThreshold: closeThreshold ?? DrawerContextInitial.closeThreshold,
}); });
const setState = state[1];
useEffect(() => { useEffect(() => {
setState((prev) => ({ state[1]((prev) => ({
...prev, ...prev,
opened: opened ?? prev.opened, opened: opened ?? prev.opened,
closeThreshold: closeThreshold ?? prev.closeThreshold, closeThreshold: closeThreshold ?? prev.closeThreshold,
})); }));
}, [closeThreshold, opened, setState]); }, [closeThreshold, opened]);
return ( return (
<DrawerContext.Provider value={state}>{children}</DrawerContext.Provider> <DrawerContext.Provider value={state}>{children}</DrawerContext.Provider>
@ -89,7 +77,7 @@ const [drawerOverlayVariant, resolveDrawerOverlayVariantProps] = vcn({
base: "fixed inset-0 transition-[backdrop-filter] duration-75", base: "fixed inset-0 transition-[backdrop-filter] duration-75",
variants: { variants: {
opened: { 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", false: "pointer-events-none select-none",
}, },
}, },
@ -107,14 +95,8 @@ interface DrawerOverlayProps
const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>( const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
(props, ref) => { (props, ref) => {
const internalRef = useRef<HTMLDivElement | null>(null);
const [state, setState] = useContext(DrawerContext); const [state, setState] = useContext(DrawerContext);
const { isMounted, isRendered } = useAnimatedMount(
state.isDragging ? true : state.opened,
internalRef,
);
const [variantProps, restPropsCompressed] = const [variantProps, restPropsCompressed] =
resolveDrawerOverlayVariantProps(props); resolveDrawerOverlayVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed; const { asChild, ...restPropsExtracted } = restPropsCompressed;
@ -136,46 +118,25 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
: 1 : 1
})`; })`;
const document = useDocument(); return createPortal(
if (!document) return null; <Comp
{...restPropsExtracted}
return ( className={drawerOverlayVariant({
<> ...variantProps,
<DrawerContext.Provider opened: state.isDragging ? true : state.opened,
value={[{ ...state, isMounted, isRendered }, setState]} })}
> onClick={onOutsideClick}
{isMounted style={{
? createPortal( backdropFilter,
<Comp WebkitBackdropFilter: backdropFilter,
{...restPropsExtracted} transitionDuration: state.isDragging ? "0s" : undefined,
className={drawerOverlayVariant({ }}
...variantProps, ref={ref}
opened: isRendered, />,
})} document.body,
onClick={onOutsideClick}
style={{
backdropFilter,
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;
}
}}
/>,
document.body,
)
: null}
</DrawerContext.Provider>
</>
); );
}, },
); );
DrawerOverlay.displayName = "DrawerOverlay";
const drawerContentColors = { const drawerContentColors = {
background: "bg-white dark:bg-black", background: "bg-white dark:bg-black",
@ -183,55 +144,28 @@ const drawerContentColors = {
}; };
const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({ 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: { variants: {
position: { position: {
top: "top-0 w-full max-w-screen rounded-t-lg border-b-2", top: "top-0 inset-x-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", bottom: "bottom-0 inset-x-0 w-full max-w-screen rounded-b-lg border-t-2",
left: "left-0 h-screen rounded-l-lg border-r-2", left: "left-0 inset-y-0 h-screen rounded-l-lg border-r-2",
right: "right-0 h-screen rounded-r-lg border-l-2", right: "right-0 inset-y-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",
}, },
opened: { opened: {
true: "", true: "touch-none",
false: false:
"[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full", "[&.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: { defaults: {
position: "left", position: "left",
opened: false, 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 interface DrawerContentProps
extends Omit< extends Omit<VariantProps<typeof drawerContentVariant>, "opened">,
VariantProps<typeof drawerContentVariant>,
"opened" | "internal"
>,
AsChild, AsChild,
ComponentPropsWithoutRef<"div"> {} ComponentPropsWithoutRef<"div"> {}
@ -366,15 +300,15 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
window.removeEventListener("touchmove", onMouseMove); window.removeEventListener("touchmove", onMouseMove);
window.removeEventListener("touchend", onMouseUp); window.removeEventListener("touchend", onMouseUp);
}; };
}, [state, setState, dragState, position]); }, [state, dragState]);
return ( return (
<div <div
className={drawerContentVariant({ className={drawerContentVariant({
...variantProps, ...variantProps,
opened: state.isRendered, opened: true,
className: dragState.isDragging className: dragState.isDragging
? "transition-[width] duration-0" ? "transition-[width_0ms]"
: variantProps.className, : variantProps.className,
})} })}
style={ style={
@ -386,7 +320,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
0) + 0) +
(position === "top" ? dragState.delta : -dragState.delta), (position === "top" ? dragState.delta : -dragState.delta),
padding: 0, padding: 0,
[`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
} }
: { : {
width: width:
@ -394,7 +327,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
0) + 0) +
(position === "left" ? dragState.delta : -dragState.delta), (position === "left" ? dragState.delta : -dragState.delta),
padding: 0, padding: 0,
[`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
} }
: { width: 0, height: 0, padding: 0 } : { width: 0, height: 0, padding: 0 }
} }
@ -403,20 +335,18 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
{...restPropsExtracted} {...restPropsExtracted}
className={drawerContentVariant({ className={drawerContentVariant({
...variantProps, ...variantProps,
opened: state.isRendered, opened: state.opened,
internal: true,
})} })}
style={{ style={{
transform: transform: dragState.isDragging
dragState.isDragging && ? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${
((["top", "left"].includes(position) && dragState.delta < 0) || dragState.delta
(["bottom", "right"].includes(position) && dragState.delta > 0)) }px)`
? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${dragState.delta}px)` : undefined,
: undefined,
transitionDuration: dragState.isDragging ? "0s" : undefined, transitionDuration: dragState.isDragging ? "0s" : undefined,
userSelect: dragState.isDragging ? "none" : undefined, userSelect: dragState.isDragging ? "none" : undefined,
}} }}
ref={(el: HTMLDivElement | null) => { ref={(el) => {
internalRef.current = el; internalRef.current = el;
if (typeof ref === "function") { if (typeof ref === "function") {
ref(el); ref(el);
@ -443,7 +373,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
); );
}, },
); );
DrawerContent.displayName = "DrawerContent";
const DrawerClose = forwardRef< const DrawerClose = forwardRef<
HTMLButtonElement, HTMLButtonElement,
@ -458,7 +387,6 @@ const DrawerClose = forwardRef<
/> />
); );
}); });
DrawerClose.displayName = "DrawerClose";
const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({ const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({
base: "flex flex-col gap-2", base: "flex flex-col gap-2",
@ -476,11 +404,8 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
const [variantProps, restPropsCompressed] = const [variantProps, restPropsCompressed] =
resolveDrawerHeaderVariantProps(props); resolveDrawerHeaderVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed; const { asChild, ...restPropsExtracted } = restPropsCompressed;
const Comp = asChild ? Slot : "div";
return ( return (
<Comp <div
{...restPropsExtracted} {...restPropsExtracted}
className={drawerHeaderVariant(variantProps)} className={drawerHeaderVariant(variantProps)}
ref={ref} ref={ref}
@ -488,10 +413,9 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
); );
}, },
); );
DrawerHeader.displayName = "DrawerHeader";
const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({ const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
base: "grow", base: "flex-grow",
variants: {}, variants: {},
defaults: {}, defaults: {},
}); });
@ -505,18 +429,14 @@ const DrawerBody = forwardRef<HTMLDivElement, DrawerBodyProps>((props, ref) => {
const [variantProps, restPropsCompressed] = const [variantProps, restPropsCompressed] =
resolveDrawerBodyVariantProps(props); resolveDrawerBodyVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed; const { asChild, ...restPropsExtracted } = restPropsCompressed;
const Comp = asChild ? Slot : "div";
return ( return (
<Comp <div
{...restPropsExtracted} {...restPropsExtracted}
className={drawerBodyVariant(variantProps)} className={drawerBodyVariant(variantProps)}
ref={ref} ref={ref}
/> />
); );
}); });
DrawerBody.displayName = "DrawerBody";
const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({ const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({
base: "flex flex-row justify-end gap-2", base: "flex flex-row justify-end gap-2",
@ -534,11 +454,8 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
const [variantProps, restPropsCompressed] = const [variantProps, restPropsCompressed] =
resolveDrawerFooterVariantProps(props); resolveDrawerFooterVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed; const { asChild, ...restPropsExtracted } = restPropsCompressed;
const Comp = asChild ? Slot : "div";
return ( return (
<Comp <div
{...restPropsExtracted} {...restPropsExtracted}
className={drawerFooterVariant(variantProps)} className={drawerFooterVariant(variantProps)}
ref={ref} ref={ref}
@ -546,7 +463,6 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
); );
}, },
); );
DrawerFooter.displayName = "DrawerFooter";
export { export {
DrawerRoot, 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 React from "react";
import { VariantProps, vcn } from "@pswui-lib";
const inputColors = { const inputColors = {
background: { background: {
default: "bg-neutral-50 dark:bg-neutral-900", default: "bg-neutral-50 dark:bg-neutral-900",
hover: hover: "hover:bg-neutral-100 dark:hover:bg-neutral-800",
"hover:bg-neutral-100 dark:hover:bg-neutral-800 has-[input:hover]:bg-neutral-100 dark:has-[input:hover]:bg-neutral-800",
invalid: 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: 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", "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: { border: {
default: "border-neutral-400 dark:border-neutral-600", default: "border-neutral-400 dark:border-neutral-600",
invalid: 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: { ring: {
default: "ring-transparent focus-within:ring-current", default: "ring-transparent focus-within:ring-current",
invalid: 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({ 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: { variants: {
unstyled: { 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", 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: "", false: "",
}, },
full: { full: {
true: "[&:has(input)]:w-full w-full", true: "w-full",
false: "[&:has(input)]:w-fit w-fit", false: "w-fit",
}, },
}, },
defaults: { defaults: {
@ -43,8 +42,7 @@ const [inputVariant, resolveInputVariantProps] = vcn({
interface InputFrameProps interface InputFrameProps
extends VariantProps<typeof inputVariant>, extends VariantProps<typeof inputVariant>,
React.ComponentPropsWithoutRef<"label">, React.ComponentPropsWithoutRef<"label"> {
AsChild {
children?: React.ReactNode; children?: React.ReactNode;
} }
@ -52,22 +50,19 @@ const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] =
resolveInputVariantProps(props); resolveInputVariantProps(props);
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed; const { children, ...otherPropsExtracted } = otherPropsCompressed;
const Comp = asChild ? Slot : "label";
return ( return (
<Comp <label
ref={ref} ref={ref}
className={`group/input-frame ${inputVariant(variantProps)}`} className={`group/input-frame ${inputVariant(variantProps)}`}
{...otherPropsExtracted} {...otherPropsExtracted}
> >
{children} {children}
</Comp> </label>
); );
}, },
); );
InputFrame.displayName = "InputFrame";
interface InputProps interface InputProps
extends VariantProps<typeof inputVariant>, extends VariantProps<typeof inputVariant>,
@ -97,7 +92,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const innerRef = React.useRef<HTMLInputElement | null>(null); const innerRef = React.useRef<HTMLInputElement | null>(null);
React.useEffect(() => { React.useEffect(() => {
if (innerRef?.current) { if (innerRef && innerRef.current) {
innerRef.current.setCustomValidity(invalid ?? ""); innerRef.current.setCustomValidity(invalid ?? "");
} }
}, [invalid]); }, [invalid]);
@ -118,6 +113,5 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
/> />
); );
}); });
Input.displayName = "Input";
export { InputFrame, 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 React from "react";
import { VariantProps, vcn } from "@pswui-lib";
const [labelVariant, resolveLabelVariantProps] = vcn({ const [labelVariant, resolveLabelVariantProps] = vcn({
base: "has-[input[disabled]]:brightness-75 has-[input[disabled]]:cursor-not-allowed has-[input:invalid]:text-red-500", 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 }; export { Label };

176
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 React, { useContext, useEffect, useRef } from "react";
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
interface IPopoverContext { interface IPopoverContext {
controlled: boolean;
opened: boolean; opened: boolean;
} }
@ -11,7 +10,6 @@ const PopoverContext = React.createContext<
>([ >([
{ {
opened: false, opened: false,
controlled: false,
}, },
() => { () => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") { 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 Popover = ({ children, opened, asChild }: PopoverProps) => {
const [state, setState] = React.useState<IPopoverContext>({ const state = React.useState<IPopoverContext>({
opened: opened ?? false, 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"; const Comp = asChild ? Slot : "div";
return ( return (
<PopoverContext.Provider value={[state, setState]}> <PopoverContext.Provider value={state}>
<Comp className="relative">{children}</Comp> <Comp className="relative">{children}</Comp>
</PopoverContext.Provider> </PopoverContext.Provider>
); );
@ -65,25 +54,26 @@ const popoverColors = {
}; };
const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({ 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: { variants: {
direction: {
row: "",
col: "",
},
anchor: { anchor: {
start: "", topLeft:
middle: "", "bottom-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-bottom-right",
end: "", topCenter:
}, "bottom-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-bottom-center",
align: { topRight:
start: "", "bottom-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-bottom-left",
middle: "", middleLeft: "top-1/2 translate-y-1/2 right-full origin-right",
end: "", middleCenter:
}, "top-1/2 translate-y-1/2 left-1/2 -translate-x-1/2 origin-center",
position: { middleRight:
start: "", "top-1/2 translate-y-1/2 left-[calc(100%+var(--popover-offset))] origin-left",
end: "", 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: { offset: {
sm: "[--popover-offset:2px]", sm: "[--popover-offset:2px]",
@ -91,104 +81,15 @@ const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
lg: "[--popover-offset:8px]", lg: "[--popover-offset:8px]",
}, },
opened: { opened: {
true: "opacity-1 scale-100 pointer-events-auto select-auto touch-auto", true: "opacity-1 scale-100",
false: "opacity-0 scale-75 pointer-events-none select-none touch-none", false: "opacity-0 scale-75",
}, },
}, },
defaults: { defaults: {
direction: "col", anchor: "bottomCenter",
anchor: "middle",
align: "middle",
position: "end",
opened: false, opened: false,
offset: "md", 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 interface PopoverContentProps
@ -200,50 +101,39 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] =
resolvePopoverContentVariantProps(props); resolvePopoverContentVariantProps(props);
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed; const { children, ...otherPropsExtracted } = otherPropsCompressed;
const [state, setState] = useContext(PopoverContext); const [state, setState] = useContext(PopoverContext);
const internalRef = useRef<HTMLDivElement | null>(null); const internalRef = useRef<HTMLDivElement | null>(null);
useEffect(() => { useEffect(() => {
function handleOutsideClick(e: MouseEvent) { function handleOutsideClick(e: any) {
if ( if (internalRef.current && !internalRef.current.contains(e.target)) {
internalRef.current &&
!internalRef.current.contains(e.target as Node | null)
) {
setState((prev) => ({ ...prev, opened: false })); setState((prev) => ({ ...prev, opened: false }));
} }
} }
!state.controlled && document.addEventListener("mousedown", handleOutsideClick);
document.addEventListener("mousedown", handleOutsideClick);
return () => { return () => {
document.removeEventListener("mousedown", handleOutsideClick); document.removeEventListener("mousedown", handleOutsideClick);
}; };
}, [state.controlled, setState]); }, [internalRef, setState]);
const Comp = asChild ? Slot : "div";
return ( return (
<Comp <div
{...otherPropsExtracted} {...otherPropsExtracted}
className={popoverContentVariant({ className={popoverContentVariant({
...variantProps, ...variantProps,
opened: state.opened, opened: state.opened,
})} })}
ref={(el: HTMLDivElement) => { ref={(el) => {
internalRef.current = el; internalRef.current = el;
if (typeof ref === "function") { typeof ref === "function" ? ref(el) : ref && (ref.current = el);
ref(el);
} else if (ref) {
ref.current = el;
}
}} }}
> >
{children} {children}
</Comp> </div>
); );
}, },
); );
PopoverContent.displayName = "PopoverContent";
export { Popover, PopoverTrigger, 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 React from "react";
import { VariantProps, vcn } from "@pswui-lib";
const switchColors = { const switchColors = {
background: { background: {
@ -80,6 +80,5 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
</label> </label>
); );
}); });
Switch.displayName = "Switch";
export { Switch }; export { Switch };

132
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";
import React from "react"; 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 { interface TabProviderProps {
defaultName: string; defaultName: string;
@ -17,6 +40,77 @@ const TabProvider = ({ defaultName, children }: TabProviderProps) => {
return <TabContext.Provider value={state}>{children}</TabContext.Provider>; 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({ const [TabListVariant, resolveTabListVariantProps] = vcn({
base: "flex flex-row bg-gray-100 dark:bg-neutral-800 rounded-lg p-1.5 gap-1", base: "flex flex-row bg-gray-100 dark:bg-neutral-800 rounded-lg p-1.5 gap-1",
variants: {}, variants: {},
@ -30,16 +124,11 @@ interface TabListProps
const TabList = (props: TabListProps) => { const TabList = (props: TabListProps) => {
const [variantProps, restProps] = resolveTabListVariantProps(props); const [variantProps, restProps] = resolveTabListVariantProps(props);
return ( return <div className={TabListVariant(variantProps)} {...restProps} />;
<div
className={TabListVariant(variantProps)}
{...restProps}
/>
);
}; };
const [TabTriggerVariant, resolveTabTriggerVariantProps] = vcn({ 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: { variants: {
active: { active: {
true: "bg-white/100 dark:bg-black/100 text-black dark:text-white", 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]);
}, [name, setContext]);
const Comp = props.asChild ? Slot : "button"; const Comp = props.asChild ? Slot : "button";
@ -124,18 +212,18 @@ const TabContent = (props: TabContentProps) => {
const { name, ...restProps } = restPropsBeforeParse; const { name, ...restProps } = restPropsBeforeParse;
const [context] = React.useContext(TabContext); const [context] = React.useContext(TabContext);
if (context.active[1] !== name) { if (context.active[1] === name) {
return (
<Slot
className={tabContentVariant({
...variantProps,
})}
{...restProps}
/>
);
} else {
return null; return null;
} }
return (
<Slot
className={tabContentVariant({
...variantProps,
})}
{...restProps}
/>
);
}; };
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";
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";

13
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 React, { useState } from "react";
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
interface TooltipContextBody { interface TooltipContextBody {
position: "top" | "bottom" | "left" | "right"; position: "top" | "bottom" | "left" | "right";
@ -71,7 +71,6 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
</TooltipContext.Provider> </TooltipContext.Provider>
); );
}); });
Tooltip.displayName = "Tooltip";
const tooltipContentColors = { const tooltipContentColors = {
variants: { variants: {
@ -84,10 +83,10 @@ const tooltipContentColors = {
}; };
const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({ const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all 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 group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100
select-none pointer-events-none 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: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]`, 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]`,
variants: { variants: {
position: { position: {
@ -140,12 +139,10 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
...variantProps, ...variantProps,
position: contextState.position, position: contextState.position,
})} })}
role="tooltip"
{...rest} {...rest}
/> />
); );
}, },
); );
TooltipContent.displayName = "TooltipContent";
export { Tooltip, TooltipContent }; export { Tooltip, TooltipContent };

219
packages/react/lib/vcn.ts → packages/react/lib.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
/** /**
@ -57,31 +58,6 @@ type VariantKV<V extends VariantType> = {
[VariantKey in keyof V]: BooleanString<keyof V[VariantKey] & string>; [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. * 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; base?: string | undefined;
variants: V; variants: V;
dynamics?: DynamicClassName<V>[];
defaults: VariantKV<V>; defaults: VariantKV<V>;
presets?: undefined; presets?: undefined;
}): [ }): [
@ -134,7 +109,6 @@ export function vcn<V extends VariantType>(param: {
/** /**
* Any Props -> Variant Props, Other Props * 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>>( <AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve, anyProps: AnyPropBeforeResolve,
) => [ ) => [
@ -150,7 +124,6 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
*/ */
base?: string | undefined; base?: string | undefined;
variants: V /* VariantType */; variants: V /* VariantType */;
dynamics?: DynamicClassName<V>[];
defaults: VariantKV<V>; defaults: VariantKV<V>;
presets: P; presets: P;
}): [ }): [
@ -166,7 +139,6 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
/** /**
* Any Props -> Variant Props, Other Props * 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>>( <AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve, anyProps: AnyPropBeforeResolve,
) => [ ) => [
@ -186,58 +158,19 @@ export function vcn<
>({ >({
base, base,
variants, variants,
dynamics = [],
defaults, defaults,
presets, presets,
}: { }: {
base?: string | undefined; base?: string | undefined;
variants: V; variants: V;
dynamics?: DynamicClassName<V>[];
defaults: VariantKV<V>; defaults: VariantKV<V>;
presets?: P; 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 [ return [
/** /**
* Takes any props (including className), and returns the class name. * 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. * 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. * @param variantProps - The variant props including className.
* @returns The class name. * @returns The class name.
*/ */
@ -246,43 +179,42 @@ export function vcn<
VariantKV<V> VariantKV<V>
>, >,
) => { ) => {
const { className, preset, ..._otherVariantProps } = variantProps; const { className, preset, ...otherVariantProps } = variantProps;
// Omit<Partial<VariantKV<V>> & { className; preset; }, className | preset> = Partial<VariantKV<V>> (safe to cast) const currentPreset: P[keyof P] | null =
// We all know `keyof V` = string, right? (but typescript says it's not, so.. attacking typescript with unknown lol) presets && preset ? (presets as NonNullable<P>)[preset] ?? null : null;
const otherVariantProps = _otherVariantProps as unknown as Partial< const presetVariantKeys: (keyof V)[] = Object.keys(currentPreset ?? {});
VariantKV<V> 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)
// 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 const currentPresetVariantValue:
if (presets && preset && preset in presets) { | (keyof V[keyof V] & string)
for (const [variantName, variantKey] of Object.entries( | undefined =
// typescript bug (casting to NonNullable<P> required) !!currentPreset && presetVariantKeys.includes(variantKey)
(presets as NonNullable<P>)[preset], ? (currentPreset as Partial<VariantKV<V>>)[
) as VariantKVEntry<V>) { variantKey
kv[variantName] = variantKey; ]?.toString?.()
} : undefined;
}
// VariantProps Processing const variantValue: keyof V[keyof V] & string =
for (const [variantName, variantKey] of Object.entries( directVariantValue ?? currentPresetVariantValue ?? defaultValue;
otherVariantProps, return variants[variantKey][variantValue];
) as VariantKVEntry<V>) { }),
if (typeof variantKey === "undefined") continue; (
kv[variantName] = variantKey; currentPreset as Partial<VariantKV<V>> | null
} )?.className?.toString?.(), // preset's classname comes after user's variant props? huh..
className,
// make dynamics result );
const dynamicClasses: string[] = [];
for (const dynamicFunction of dynamics) {
dynamicClasses.push(dynamicFunction(kv));
}
return __transformer__(kv, dynamicClasses, className);
}, },
/** /**
* Takes any props, parse variant props and other props. * Takes any props, parse variant props and other props.
* If `options.excludeA` is true, then it will parse `A` as "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. * @param anyProps - Any props that have passed to the component.
* @returns [variantProps, otherProps] * @returns [variantProps, otherProps]
*/ */
<AnyPropBeforeResolve extends Record<string, unknown>>( <AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve, anyProps: AnyPropBeforeResolve,
) => { ) => {
const variantKeys = Object.keys(variants) as (keyof V)[]; 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> = export type VariantProps<F extends (props: any) => string> = F extends (
F extends (props: infer P) => string ? { [key in keyof P]: P[key] } : never; 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;
}

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";

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 };

15
packages/react/package.json
View File

@ -6,21 +6,28 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build && cp ./404.html ./dist", "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" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@tailwindcss/vite": "^4.0.12",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"tailwind-merge": "^2.3.0", "tailwind-merge": "^2.3.0"
"tailwindcss": "^4.0.12"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20.12.13", "@types/node": "^20.12.13",
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22", "@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1", "@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", "typescript": "^5.4.5",
"vite": "^5.2.0" "vite": "^5.2.0"
} }

10
packages/react/src/main.tsx Normal file
View File

@ -0,0 +1,10 @@
import "./tailwind.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

5
packages/react/src/tailwind.css
View File

@ -1,5 +1,7 @@
@import tailwindcss;
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css"); @import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base { @layer base {
:root { :root {
@ -32,3 +34,4 @@
@apply transition-colors; @apply transition-colors;
} }
} }

14
packages/react/tailwind.config.js Normal file
View File

@ -0,0 +1,14 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./{components,stories,src}/**/*.{js,jsx,ts,tsx,css,mdx}"],
darkMode: [
"variant",
[
"@media (prefers-color-scheme: dark) { &:is(.system *) }",
"&:is(.dark *)",
],
],
theme: {
extend: {},
},
};

5
packages/react/tsconfig.json
View File

@ -5,7 +5,6 @@
"lib": ["ES2021", "DOM", "DOM.Iterable"], "lib": ["ES2021", "DOM", "DOM.Iterable"],
"module": "ESNext", "module": "ESNext",
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
@ -26,9 +25,9 @@
"paths": { "paths": {
"@components/*": ["components/*"], "@components/*": ["components/*"],
"@/*": ["src/*"], "@/*": ["src/*"],
"@pswui-lib": ["lib/index.ts"] "@pswui-lib": ["lib.tsx"]
} }
}, },
"include": ["components", "src", "lib"], "include": ["components", "src", "./lib.tsx"],
"references": [{ "path": "./tsconfig.node.json" }] "references": [{ "path": "./tsconfig.node.json" }]
} }

17
packages/react/vite.config.ts
View File

@ -1,16 +1,23 @@
import { resolve } from "node:path";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";
import { resolve } from "node:path";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react(), tailwindcss()], plugins: [
react()
],
css: {
postcss: {
plugins: [tailwindcss()],
},
},
resolve: { resolve: {
alias: { alias: {
"@components": resolve(__dirname, "./components"), "@components": resolve(__dirname, "./components"),
"@": resolve(__dirname, "./src"), "@": resolve(__dirname, "./src"),
"@pswui-lib": resolve(__dirname, "./lib/index.ts"), "@pswui-lib": resolve(__dirname, "./lib.tsx"),
}, },
}, },
}); });

56
registry.json
View File

@ -1,46 +1,20 @@
{ {
"base": "https://raw.githubusercontent.com/pswui/ui/{branch}", "base": "https://raw.githubusercontent.com/pswui/ui",
"paths": { "paths": {
"components": "/packages/react/components/{componentName}", "components": "/main/packages/react/components/{componentName}",
"lib": "/packages/react/lib/{libName}" "lib": "/main/packages/react/lib.tsx"
}, },
"lib": [
"index.ts",
"Slot.tsx",
"vcn.ts",
"useDocument.ts",
"useAnimatedMount.ts"
],
"components": { "components": {
"button": { "type": "file", "name": "Button.tsx" }, "button": { "name": "Button.tsx" },
"checkbox": { "type": "file", "name": "Checkbox.tsx" }, "checkbox": { "name": "Checkbox.tsx" },
"dialog": { "dialog": { "name": "Dialog.tsx" },
"type": "dir", "drawer": { "name": "Drawer.tsx" },
"name": "Dialog", "input": { "name": "Input.tsx" },
"files": ["index.ts", "Component.tsx", "Context.ts"] "label": { "name": "Label.tsx" },
}, "popover": { "name": "Popover.tsx" },
"drawer": { "type": "file", "name": "Drawer.tsx" }, "switch": { "name": "Switch.tsx" },
"form": { "type": "file", "name": "Form.tsx" }, "tabs": { "name": "Tabs.tsx" },
"input": { "type": "file", "name": "Input.tsx" }, "toast": { "name": "Toast.tsx" },
"label": { "type": "file", "name": "Label.tsx" }, "tooltip": {"name": "Tooltip.tsx" }
"popover": { "type": "file", "name": "Popover.tsx" },
"switch": { "type": "file", "name": "Switch.tsx" },
"tabs": {
"type": "dir",
"name": "Tabs",
"files": ["index.ts", "Context.ts", "Hook.ts", "Component.tsx"]
},
"toast": {
"type": "dir",
"name": "Toast",
"files": [
"index.ts",
"Component.tsx",
"Hook.ts",
"Store.ts",
"Variant.ts"
]
},
"tooltip": { "type": "file", "name": "Tooltip.tsx" }
} }
} }

3123
yarn.lock
View File

File diff suppressed because it is too large Load Diff