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

Merge pull request #1 from pswui/fix/separate-components

Browse Source 
Split library & component files into directory
This commit is contained in:
Shinwoo PARK 2024-06-15 04:05:12 +09:00 committed by GitHub
commit 5c8fef9b24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
30 changed files with 632 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/cli/.eslintrc.json
View File

@ -43,7 +43,8 @@
"@typescript-eslint/no-useless-constructor": "error",
"@typescript-eslint/no-var-requires": "off",
"import/no-unresolved": "error",
"import/default": "warn",
"import/default": "off",
"import/no-named-as-default-member": "off",
"n/no-missing-import": "off",
"n/no-unsupported-features/es-syntax": "off",
"no-unused-expressions": "off",

14
packages/cli/README.md
View File

@ -20,7 +20,7 @@ $ npm install -g @psw-ui/cli
$ pswui COMMAND
running command...
$ pswui (--version)
@psw-ui/cli/0.2.0 linux-x64 node-v20.13.1
@psw-ui/cli/0.5.0 linux-x64 node-v20.13.1
$ pswui --help [COMMAND]
USAGE
$ pswui COMMAND
@ -49,7 +49,7 @@ FLAGS
-c, --components=<value> place for installation of components
-f, --force override the existing file
-p, --config=<value> path to config
-r, --registry=<value> override registry ur
-r, --branch=<value> use other branch instead of main
-s, --shared=<value> place for installation of shared.ts
DESCRIPTION
@ -59,7 +59,7 @@ EXAMPLES
$ pswui add
```
_See code: [packages/cli/src/commands/add.tsx](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/add.tsx)_
_See code: [packages/cli/src/commands/add.tsx](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/add.tsx)_
## `pswui help [COMMAND]`
@ -91,7 +91,7 @@ USAGE
FLAGS
-p, --config=<value> path to config
-r, --registry=<value> override registry url
-r, --branch=<value> use other branch instead of main
-u, --url include component file URL
DESCRIPTION
@ -101,7 +101,7 @@ EXAMPLES
$ pswui list
```
_See code: [packages/cli/src/commands/list.ts](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/list.ts)_
_See code: [packages/cli/src/commands/list.ts](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/list.ts)_
## `pswui search`
@ -117,7 +117,7 @@ ARGUMENTS
QUERY search query
FLAGS
-r, --registry=<value> override registry url
-r, --branch=<value> use other branch instead of main
DESCRIPTION
Search components.
@ -126,5 +126,5 @@ EXAMPLES
$ pswui search
```
_See code: [packages/cli/src/commands/search.tsx](https://github.com/pswui/ui/blob/cli@0.4.1/packages/cli/src/commands/search.tsx)_
_See code: [packages/cli/src/commands/search.tsx](https://github.com/pswui/ui/blob/cli@0.5.0/packages/cli/src/commands/search.tsx)_
<!-- commandsstop -->

2
packages/cli/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@psw-ui/cli",
"description": "CLI for PSW/UI",
"version": "0.4.1",
"version": "0.5.0",
"author": "p-sw",
"bin": {
"pswui": "./bin/run.js"

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

@ -2,15 +2,16 @@ import {Args, Command, Flags} from '@oclif/core'
import {loadConfig, validateConfig} from '../helpers/config.js'
import {existsSync} from 'node:fs'
import {mkdir, writeFile} from 'node:fs/promises'
import {join, dirname} from 'node:path'
import {getAvailableComponentNames, getComponentRealname, getComponentURL, getRegistry} from '../helpers/registry.js'
import {join} from 'node:path'
import {getComponentURL, getDirComponentURL, getRegistry} from '../helpers/registry.js'
import ora from 'ora'
import React, {ComponentPropsWithoutRef} from 'react'
import {render, Box} from 'ink'
import {SearchBox} from '../components/SearchBox.js'
import {getComponentsInstalled} from '../helpers/path.js'
import {getDirComponentRequiredFiles, checkComponentInstalled} from '../helpers/path.js'
import {Choice} from '../components/Choice.js'
import {colorize} from '@oclif/core/ux'
import {safeFetch} from '../helpers/safe-fetcher.js'
function Generator() {
let complete: boolean = false
@ -85,7 +86,7 @@ export default class Add extends Command {
static override examples = ['<%= config.bin %> <%= command.id %>']
static override flags = {
registry: Flags.string({char: 'r', description: 'override registry url'}),
branch: Flags.string({char: 'r', description: 'use other branch instead of main'}),
force: Flags.boolean({char: 'f', description: 'override the existing file'}),
config: Flags.string({char: 'p', description: 'path to config'}),
shared: Flags.string({char: 's', description: 'place for installation of shared.ts'}),
@ -100,35 +101,35 @@ export default class Add extends Command {
const resolvedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config))
const componentFolder = join(process.cwd(), resolvedConfig.paths.components)
const libFile = join(process.cwd(), resolvedConfig.paths.lib)
const libFolder = join(process.cwd(), resolvedConfig.paths.lib)
if (!existsSync(componentFolder)) {
await mkdir(componentFolder, {recursive: true})
}
if (!existsSync(dirname(libFile))) {
await mkdir(dirname(libFile), {recursive: true})
if (!existsSync(libFolder)) {
await mkdir(libFolder, {recursive: true})
}
const loadRegistryOra = ora('Fetching registry...').start()
if (flags.registry) {
this.log(`Using ${flags.registry} for registry.`)
this.log(`Using ${flags.branch} for branch.`)
}
const unsafeRegistry = await getRegistry(flags.registry)
const unsafeRegistry = await getRegistry(flags.branch)
if (!unsafeRegistry.ok) {
loadRegistryOra.fail(unsafeRegistry.message)
return
}
const registry = unsafeRegistry.registry
const componentNames = await getAvailableComponentNames(registry)
const componentNames = Object.keys(registry.components)
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]),
}))
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,
})
}
let name: string | undefined = args.name?.toLowerCase?.()
let requireForce: boolean =
@ -183,39 +184,72 @@ export default class Add extends Command {
}
const libFileOra = ora('Installing required library...').start()
if (!existsSync(libFile)) {
const libFileContentResponse = await fetch(registry.base + registry.paths.lib)
if (!libFileContentResponse.ok) {
libFileOra.fail(
`Error while fetching library content: ${libFileContentResponse.status} ${libFileContentResponse.statusText}`,
)
return
let successCount = 0
for await (const libFile of registry.lib) {
const filePath = join(libFolder, libFile)
if (!existsSync(filePath)) {
const libFileContentResponse = await safeFetch(registry.base + registry.paths.lib.replace('{libName}', libFile))
if (!libFileContentResponse.ok) {
libFileOra.fail(libFileContentResponse.message)
return
}
const libFileContent = await libFileContentResponse.response.text()
await writeFile(filePath, libFileContent)
successCount++
}
const libFileContent = await libFileContentResponse.text()
await writeFile(libFile, libFileContent)
libFileOra.succeed('Library is successfully installed!')
}
if (successCount > 1) {
libFileOra.succeed('Successfully installed library files!')
} else {
libFileOra.succeed('Library is already installed!')
libFileOra.succeed('Library files are already installed!')
}
const componentFileOra = ora(`Installing ${name} component...`).start()
const componentFile = join(componentFolder, registry.components[name].name)
if (existsSync(componentFile) && !force) {
componentFileOra.succeed(`Component is already installed! (${componentFile})`)
} else {
const componentFileContentResponse = await fetch(await getComponentURL(registry, name))
if (!componentFileContentResponse.ok) {
componentFileOra.fail(
`Error while fetching component file content: ${componentFileContentResponse.status} ${componentFileContentResponse.statusText}`,
const componentObject = registry.components[name]
if (componentObject.type === 'file') {
const componentFile = join(componentFolder, registry.components[name].name)
if (existsSync(componentFile) && !force) {
componentFileOra.succeed(`Component is already installed! (${componentFile})`)
} 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),
)
return
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.')

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

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

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

@ -1,7 +1,7 @@
import {Command, Args, Flags} from '@oclif/core'
import {render} from 'ink'
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 {
@ -10,7 +10,7 @@ export default class Search extends Command {
}
static override flags = {
registry: Flags.string({char: 'r', description: 'override registry url'})
branch: Flags.string({char: 'r', description: 'use other branch instead of main'}),
}
static override description = 'Search components.'
@ -20,15 +20,15 @@ export default class Search extends Command {
public async run(): Promise<void> {
const {args, flags} = await this.parse(Search)
if (flags.registry) {
this.log(`Using ${flags.registry} for registry.`)
if (flags.branch) {
this.log(`Using ${flags.branch} for registry.`)
}
const registryResult = await getRegistry(flags.registry)
const registryResult = await getRegistry(flags.branch)
if (!registryResult.ok) {
this.error(registryResult.message)
}
const registry = registryResult.registry
const componentNames = await getAvailableComponentNames(registry)
const componentNames = Object.keys(registry.components)
await render(
<SearchBox

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

@ -1,15 +1,23 @@
import {z} from 'zod'
export const REGISTRY_URL = 'https://raw.githubusercontent.com/pswui/ui/main/registry.json'
export const registryURL = (branch: string) => `https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json`
export const CONFIG_DEFAULT_PATH = 'pswui.config.js'
interface RegistryComponent {
name: string
}
export type RegistryComponent =
| {
files: string[]
name: string
type: 'dir'
}
| {
name: string
type: 'file'
}
export interface Registry {
base: string
components: Record<string, RegistryComponent>
lib: string[]
paths: {
components: string
lib: string
@ -28,7 +36,7 @@ export interface Config {
*/
paths?: {
components?: 'src/pswui/components' | string
lib?: 'src/pswui/lib.tsx' | string
lib?: 'src/pswui/lib' | string
}
}
export type ResolvedConfig<T = Config> = {
@ -41,7 +49,7 @@ export const DEFAULT_CONFIG = {
},
paths: {
components: 'src/pswui/components',
lib: 'src/pswui/lib.tsx',
lib: 'src/pswui/lib',
},
}
export const configZod = z.object({

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

@ -2,23 +2,35 @@ import {existsSync} from 'node:fs'
import {readdir} from 'node:fs/promises'
import path from 'node:path'
import {ResolvedConfig} from '../const.js'
import {RegistryComponent, ResolvedConfig} from '../const.js'
export async function getComponentsInstalled(components: string[], config: ResolvedConfig) {
const componentPath = path.join(process.cwd(), config.paths.components)
if (existsSync(componentPath)) {
const dir = await readdir(componentPath)
const dirOnlyContainsComponent = []
for (const fileName of dir) {
if (components.includes(fileName)) {
dirOnlyContainsComponent.push(fileName)
}
}
return dirOnlyContainsComponent
export async function getDirComponentRequiredFiles<T extends {type: 'dir'} & RegistryComponent>(
componentObject: T,
config: ResolvedConfig,
) {
const componentPath = path.join(process.cwd(), config.paths.components, componentObject.name)
if (!existsSync(componentPath)) {
return componentObject.files
}
return []
const dir = await readdir(componentPath)
return componentObject.files.filter((filename) => !dir.includes(filename))
}
export async function checkComponentInstalled(component: RegistryComponent, config: ResolvedConfig): Promise<boolean> {
const componentDirRoot = path.join(process.cwd(), config.paths.components)
if (!existsSync(componentDirRoot)) return false
if (component.type === 'file') {
const dir = await readdir(componentDirRoot)
return dir.includes(component.name)
}
const componentDir = path.join(componentDirRoot, component.name)
if (!existsSync(componentDir)) return false
const dir = await readdir(componentDir)
return component.files.filter((filename) => !dir.includes(filename)).length === 0
}
export async function changeExtension(_path: string, extension: string): Promise<string> {

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

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

19
packages/cli/src/helpers/safe-fetcher.ts Normal file
View File

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

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

@ -1,32 +1,13 @@
import React, { Dispatch, SetStateAction, useState } from "react";
import React, { useState } from "react";
import { Slot, VariantProps, vcn } from "@pswui-lib";
import ReactDOM from "react-dom";
/**
* =========================
* DialogContext
* =========================
*/
interface DialogContext {
opened: boolean;
}
const initialDialogContext: DialogContext = { opened: false };
const DialogContext = React.createContext<
[DialogContext, Dispatch<SetStateAction<DialogContext>>]
>([
import {
DialogContext,
initialDialogContext,
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using DialogContext outside of a provider.",
);
}
},
]);
const useDialogContext = () => React.useContext(DialogContext);
useDialogContext,
IDialogContext,
} from "./Context";
/**
* =========================
@ -39,7 +20,7 @@ interface DialogRootProps {
}
const DialogRoot = ({ children }: DialogRootProps) => {
const state = useState<DialogContext>(initialDialogContext);
const state = useState<IDialogContext>(initialDialogContext);
return (
<DialogContext.Provider value={state}>{children}</DialogContext.Provider>
);
@ -411,7 +392,6 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
);
export {
useDialogContext,
DialogRoot,
DialogTrigger,
DialogOverlay,

27
packages/react/components/Dialog/Context.ts Normal file
View File

@ -0,0 +1,27 @@
import { Dispatch, SetStateAction, useContext, createContext } from "react";
/**
* =========================
* DialogContext
* =========================
*/
export interface IDialogContext {
opened: boolean;
}
export const initialDialogContext: IDialogContext = { opened: false };
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);

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

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

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

@ -349,7 +349,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
transitionDuration: dragState.isDragging ? "0s" : undefined,
userSelect: dragState.isDragging ? "none" : undefined,
}}
ref={(el) => {
ref={(el: HTMLDivElement | null) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);

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

@ -1,30 +1,7 @@
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
import React from "react";
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.",
);
}
},
]);
import { TabContextBody, TabContext, Tab } from "./Context";
interface TabProviderProps {
defaultName: string;
@ -40,77 +17,6 @@ const TabProvider = ({ defaultName, children }: TabProviderProps) => {
return <TabContext.Provider value={state}>{children}</TabContext.Provider>;
};
/**
* Provides current state for tab, using context.
* Also provides functions to control state.
*/
const useTabState = () => {
const [state, setState] = React.useContext(TabContext);
function getActiveTab() {
return state.active;
}
function setActiveTab(name: string): void;
function setActiveTab(index: number): void;
function setActiveTab(param: string | number) {
if (typeof param === "number") {
if (param < 0 || param >= state.tabs.length) {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.error(
`Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
state.tabs.length - 1
}`,
);
}
return;
}
setState((prev) => {
return {
...prev,
active: [param, prev.tabs[param].name],
};
});
} else if (typeof param === "string") {
const index = state.tabs.findIndex((tab) => tab.name === param);
if (index === -1) {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.error(
`Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
.map((tab) => tab.name)
.join(", ")}`,
);
}
return;
}
setActiveTab(index);
}
}
function setPreviousActive() {
if (state.active[0] === 0) {
return;
}
setActiveTab(state.active[0] - 1);
}
function setNextActive() {
if (state.active[0] === state.tabs.length - 1) {
return;
}
setActiveTab(state.active[0] + 1);
}
return {
getActiveTab,
setActiveTab,
setPreviousActive,
setNextActive,
};
};
const [TabListVariant, resolveTabListVariantProps] = vcn({
base: "flex flex-row bg-gray-100 dark:bg-neutral-800 rounded-lg p-1.5 gap-1",
variants: {},
@ -227,4 +133,4 @@ const TabContent = (props: TabContentProps) => {
}
};
export { TabProvider, useTabState, TabList, TabTrigger, TabContent };
export { TabProvider, TabList, TabTrigger, TabContent };

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

@ -0,0 +1,26 @@
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 Normal file
View File

@ -0,0 +1,74 @@
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 Normal file
View File

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

159
packages/react/components/Toast.tsx → packages/react/components/Toast/Component.tsx
View File

@ -2,148 +2,19 @@ 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;
const 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,
};
}
import { toastVariant } from "./Variant";
import {
ToastOption,
toasts,
subscribeSingle,
getSingleSnapshot,
notifySingle,
close,
notify,
defaultToastOption,
subscribe,
getSnapshot,
} from "./Store";
const ToastTemplate = ({
id,
@ -307,7 +178,7 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
{ReactDOM.createPortal(
<div
{...otherPropsExtracted}
data-toaster-root
data-toaster-root={true}
className={toasterVariant(variantProps)}
ref={(el) => {
internalRef.current = el;
@ -333,4 +204,4 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
);
});
export { Toaster, useToast };
export { Toaster };

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

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

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

@ -0,0 +1,100 @@
import { 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() {
subscribers.forEach((subscriber) => subscriber());
}
export function notifySingle(id: `${number}`) {
toasts[id].subscribers.forEach((subscriber) => 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 Normal file
View File

@ -0,0 +1,40 @@
import { 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;
}

0
packages/react/components/Toast/index.ts Normal file
View File

97
packages/react/lib/Slot.tsx Normal file
View File

@ -0,0 +1,97 @@
import { twMerge } from "tailwind-merge";
import React from "react";
/**
* 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) =>
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<
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),
ref: combinedRef([
ref,
(children as unknown as { ref: React.Ref<HTMLElement> }).ref,
]),
} as never);
});
export interface AsChild {
asChild?: boolean;
}

2
packages/react/lib/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./vcn";
export * from "./Slot";

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

@ -1,4 +1,3 @@
import React from "react";
import { twMerge } from "tailwind-merge";
/**
@ -109,7 +108,8 @@ export function vcn<V extends VariantType>(param: {
/**
* Any Props -> Variant Props, Other Props
*/
<AnyPropBeforeResolve extends Record<string, unknown>>(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve,
) => [
Partial<VariantKV<V>> & {
@ -139,7 +139,8 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
/**
* Any Props -> Variant Props, Other Props
*/
<AnyPropBeforeResolve extends Record<string, unknown>>(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve,
) => [
Partial<VariantKV<V>> & {
@ -268,103 +269,5 @@ export function vcn<
* }
* ```
*/
export type VariantProps<F extends (props: unknown) => string> = F extends (
props: infer P,
) => string
? P
: never;
/**
* Merges the react props.
* Basically childProps will override parentProps.
* But if it is a event handler, style, or className, it will be merged.
*
* @param parentProps - The parent props.
* @param childProps - The child props.
* @returns The merged props.
*/
function mergeReactProps(
parentProps: Record<string, 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) =>
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<
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),
ref: combinedRef([
ref,
(children as unknown as { ref: React.Ref<HTMLElement> }).ref,
]),
} as never);
});
export interface AsChild {
asChild?: boolean;
}
export type VariantProps<F extends (props: Record<string, unknown>) => string> =
F extends (props: infer P) => string ? { [key in keyof P]: P[key] } : never;

5
packages/react/src/main.tsx
View File

@ -1,10 +1,7 @@
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>
<React.StrictMode></React.StrictMode>,
);

5
packages/react/tsconfig.json
View File

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

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

@ -5,9 +5,7 @@ import { resolve } from "node:path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react()
],
plugins: [react()],
css: {
postcss: {
plugins: [tailwindcss()],
@ -17,7 +15,7 @@ export default defineConfig({
alias: {
"@components": resolve(__dirname, "./components"),
"@": resolve(__dirname, "./src"),
"@pswui-lib": resolve(__dirname, "./lib.tsx"),
"@pswui-lib": resolve(__dirname, "./vcn.ts"),
},
},
});

33
registry.json
View File

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