diff --git a/README.md b/README.md index 39c1dfa..933eae9 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,58 @@ +

+ +

+ +

+ Meet our beautiful web documentation. +

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