diff --git a/packages/cli/.eslintrc.json b/packages/cli/.eslintrc.json index a861f56..2ae35f3 100644 --- a/packages/cli/.eslintrc.json +++ b/packages/cli/.eslintrc.json @@ -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", diff --git a/packages/cli/README.md b/packages/cli/README.md index c50c023..b86cee1 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -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= place for installation of components -f, --force override the existing file -p, --config= path to config - -r, --registry= override registry ur + -r, --branch= use other branch instead of main -s, --shared= 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= path to config - -r, --registry= override registry url + -r, --branch= 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= override registry url + -r, --branch= 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)_ diff --git a/packages/cli/package.json b/packages/cli/package.json index d11348e..2db622c 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -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" diff --git a/packages/cli/src/commands/add.tsx b/packages/cli/src/commands/add.tsx index bc2f139..176bdfd 100644 --- a/packages/cli/src/commands/add.tsx +++ b/packages/cli/src/commands/add.tsx @@ -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.') diff --git a/packages/cli/src/commands/list.ts b/packages/cli/src/commands/list.ts index 279ce68..6c1947b 100644 --- a/packages/cli/src/commands/list.ts +++ b/packages/cli/src/commands/list.ts @@ -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 = {} + let final: Record; 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 = {} + + 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)) } } diff --git a/packages/cli/src/commands/search.tsx b/packages/cli/src/commands/search.tsx index a339125..e5c708b 100644 --- a/packages/cli/src/commands/search.tsx +++ b/packages/cli/src/commands/search.tsx @@ -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 { 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( `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 + 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 = { @@ -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({ diff --git a/packages/cli/src/helpers/path.ts b/packages/cli/src/helpers/path.ts index 85a9338..f68699e 100644 --- a/packages/cli/src/helpers/path.ts +++ b/packages/cli/src/helpers/path.ts @@ -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( + 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 { + 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 { diff --git a/packages/cli/src/helpers/registry.ts b/packages/cli/src/helpers/registry.ts index 56e265a..97c0e69 100644 --- a/packages/cli/src/helpers/registry.ts +++ b/packages/cli/src/helpers/registry.ts @@ -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 { - return Object.keys(registry.components) -} - -export async function getComponentURL(registry: Registry, componentName: string): Promise { - 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 { - 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]) } diff --git a/packages/cli/src/helpers/safe-fetcher.ts b/packages/cli/src/helpers/safe-fetcher.ts new file mode 100644 index 0000000..271e39b --- /dev/null +++ b/packages/cli/src/helpers/safe-fetcher.ts @@ -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, + } +} diff --git a/packages/react/components/Dialog.tsx b/packages/react/components/Dialog/Component.tsx similarity index 92% rename from packages/react/components/Dialog.tsx rename to packages/react/components/Dialog/Component.tsx index 704db6f..f4bdc36 100644 --- a/packages/react/components/Dialog.tsx +++ b/packages/react/components/Dialog/Component.tsx @@ -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>] ->([ +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(initialDialogContext); + const state = useState(initialDialogContext); return ( {children} ); @@ -411,7 +392,6 @@ const DialogFooter = React.forwardRef( ); export { - useDialogContext, DialogRoot, DialogTrigger, DialogOverlay, diff --git a/packages/react/components/Dialog/Context.ts b/packages/react/components/Dialog/Context.ts new file mode 100644 index 0000000..3b59c7b --- /dev/null +++ b/packages/react/components/Dialog/Context.ts @@ -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>] +>([ + 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); diff --git a/packages/react/components/Dialog/index.ts b/packages/react/components/Dialog/index.ts new file mode 100644 index 0000000..9202698 --- /dev/null +++ b/packages/react/components/Dialog/index.ts @@ -0,0 +1,2 @@ +export * from "./Component"; +export { useDialogContext } from "./Context"; diff --git a/packages/react/components/Drawer.tsx b/packages/react/components/Drawer.tsx index b6bb745..bceb316 100644 --- a/packages/react/components/Drawer.tsx +++ b/packages/react/components/Drawer.tsx @@ -349,7 +349,7 @@ const DrawerContent = forwardRef( 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); diff --git a/packages/react/components/Tabs.tsx b/packages/react/components/Tabs/Component.tsx similarity index 59% rename from packages/react/components/Tabs.tsx rename to packages/react/components/Tabs/Component.tsx index 3214bda..bc90902 100644 --- a/packages/react/components/Tabs.tsx +++ b/packages/react/components/Tabs/Component.tsx @@ -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>] ->([ - { - 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 {children}; }; -/** - * 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 }; diff --git a/packages/react/components/Tabs/Context.ts b/packages/react/components/Tabs/Context.ts new file mode 100644 index 0000000..4f00846 --- /dev/null +++ b/packages/react/components/Tabs/Context.ts @@ -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>] +>([ + { + 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.", + ); + } + }, +]); diff --git a/packages/react/components/Tabs/Hook.ts b/packages/react/components/Tabs/Hook.ts new file mode 100644 index 0000000..26e2aa3 --- /dev/null +++ b/packages/react/components/Tabs/Hook.ts @@ -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, + }; +}; diff --git a/packages/react/components/Tabs/index.ts b/packages/react/components/Tabs/index.ts new file mode 100644 index 0000000..c16790c --- /dev/null +++ b/packages/react/components/Tabs/index.ts @@ -0,0 +1,2 @@ +export * from "./Component"; +export * from "./Hook"; diff --git a/packages/react/components/Toast.tsx b/packages/react/components/Toast/Component.tsx similarity index 62% rename from packages/react/components/Toast.tsx rename to packages/react/components/Toast/Component.tsx index 3a1063f..9200465 100644 --- a/packages/react/components/Toast.tsx +++ b/packages/react/components/Toast/Component.tsx @@ -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, "preset"> { - title: string; - description: string; -} - -let index = 0; -const toasts: Record< - `${number}`, - ToastBody & Partial & { 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 & Partial>, -) { - toasts[id] = { - ...toasts[id], - ...toast, - }; - notifySingle(id); -} - -function addToast(toast: Omit & Partial) { - const id: `${number}` = `${index}`; - toasts[id] = { - ...toast, - subscribers: [], - life: "born", - }; - index += 1; - notify(); - - return { - update: (toast: Partial & Partial>) => - 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((props, ref) => { {ReactDOM.createPortal(
{ internalRef.current = el; @@ -333,4 +204,4 @@ const Toaster = React.forwardRef((props, ref) => { ); }); -export { Toaster, useToast }; +export { Toaster }; diff --git a/packages/react/components/Toast/Hook.ts b/packages/react/components/Toast/Hook.ts new file mode 100644 index 0000000..f6d74a2 --- /dev/null +++ b/packages/react/components/Toast/Hook.ts @@ -0,0 +1,9 @@ +import { addToast, update, close } from "./Store"; + +export function useToast() { + return { + toast: addToast, + update, + close, + }; +} diff --git a/packages/react/components/Toast/Store.ts b/packages/react/components/Toast/Store.ts new file mode 100644 index 0000000..04fb4f2 --- /dev/null +++ b/packages/react/components/Toast/Store.ts @@ -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 & { 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 & Partial>, +) { + toasts[id] = { + ...toasts[id], + ...toast, + }; + notifySingle(id); +} + +export function addToast( + toast: Omit & Partial, +) { + const id: `${number}` = `${index}`; + toasts[id] = { + ...toast, + subscribers: [], + life: "born", + }; + index += 1; + notify(); + + return { + update: (toast: Partial & Partial>) => + update(id, toast), + close: () => close(id), + }; +} diff --git a/packages/react/components/Toast/Variant.ts b/packages/react/components/Toast/Variant.ts new file mode 100644 index 0000000..2a0285c --- /dev/null +++ b/packages/react/components/Toast/Variant.ts @@ -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, "preset"> { + title: string; + description: string; +} diff --git a/packages/react/components/Toast/index.ts b/packages/react/components/Toast/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/react/lib/Slot.tsx b/packages/react/lib/Slot.tsx new file mode 100644 index 0000000..51ee483 --- /dev/null +++ b/packages/react/lib/Slot.tsx @@ -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, + childProps: Record, +) { + 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(refs: React.Ref[]) { + return (instance: I | null) => + refs.forEach((ref) => { + if (ref instanceof Function) { + ref(instance); + } else if (ref) { + (ref as React.MutableRefObject).current = instance; + } + }); +} + +interface SlotProps { + children?: React.ReactNode; +} +export const Slot = React.forwardRef< + HTMLElement, + SlotProps & Record +>((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 }).ref, + ]), + } as never); +}); + +export interface AsChild { + asChild?: boolean; +} diff --git a/packages/react/lib/index.ts b/packages/react/lib/index.ts new file mode 100644 index 0000000..faba6d8 --- /dev/null +++ b/packages/react/lib/index.ts @@ -0,0 +1,2 @@ +export * from "./vcn"; +export * from "./Slot"; diff --git a/packages/react/lib.tsx b/packages/react/lib/vcn.ts similarity index 71% rename from packages/react/lib.tsx rename to packages/react/lib/vcn.ts index a3fad95..d232f2c 100644 --- a/packages/react/lib.tsx +++ b/packages/react/lib/vcn.ts @@ -1,4 +1,3 @@ -import React from "react"; import { twMerge } from "tailwind-merge"; /** @@ -109,7 +108,8 @@ export function vcn(param: { /** * Any Props -> Variant Props, Other Props */ - >( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + >( anyProps: AnyPropBeforeResolve, ) => [ Partial> & { @@ -139,7 +139,8 @@ export function vcn>(param: { /** * Any Props -> Variant Props, Other Props */ - >( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + >( anyProps: AnyPropBeforeResolve, ) => [ Partial> & { @@ -268,103 +269,5 @@ export function vcn< * } * ``` */ -export type VariantProps 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, - childProps: Record, -) { - 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(refs: React.Ref[]) { - return (instance: I | null) => - refs.forEach((ref) => { - if (ref instanceof Function) { - ref(instance); - } else if (ref) { - (ref as React.MutableRefObject).current = instance; - } - }); -} - -interface SlotProps { - children?: React.ReactNode; -} -export const Slot = React.forwardRef< - HTMLElement, - SlotProps & Record ->((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 }).ref, - ]), - } as never); -}); - -export interface AsChild { - asChild?: boolean; -} +export type VariantProps) => string> = + F extends (props: infer P) => string ? { [key in keyof P]: P[key] } : never; diff --git a/packages/react/src/main.tsx b/packages/react/src/main.tsx index bfddd5c..b9a9cf4 100644 --- a/packages/react/src/main.tsx +++ b/packages/react/src/main.tsx @@ -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( - - - + , ); diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index 2f201c8..7e34c5b 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -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" }] } diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts index 97d5aa2..a059b21 100644 --- a/packages/react/vite.config.ts +++ b/packages/react/vite.config.ts @@ -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"), }, }, }); diff --git a/registry.json b/registry.json index 6a14dc0..269dfeb 100644 --- a/registry.json +++ b/registry.json @@ -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" } } } \ No newline at end of file