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

refactor(react): update installation guide

Browse Source 
Update the installation guide in React docs, transforming it into a tabbed interface separating CLI and Manual Installation methods for better readability and ease of understanding.
This commit is contained in:
p-sw 2024-06-11 17:40:28 +09:00
parent 643dc6eafd
commit 35603cadaf
1 changed files with 34 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
packages/react/src/docs/installation.mdx
View File

@ -1,80 +1,36 @@
import {TabProvider, TabContent, TabList, TabTrigger} from "@components/Tabs";
import {Code} from "@/components/LoadedCode";
# Installation # Installation
## Main Dependency <TabProvider defaultName="cli">
<TabList>
you have to install [TailwindCSS](https://tailwindcss.com/docs/installation) and [tailwind-merge](https://github.com/dhiwise/tailwind-merge) and configure it yourself. <TabTrigger name="cli">Using CLI</TabTrigger>
<TabTrigger name="manual">Manual Install</TabTrigger>
## Configuration </TabList>
<TabContent name="cli">
Every PSWUI component uses `shared.tsx` core utility file. So, you have to care about import of `shared.tsx`. 1. Install [TailwindCSS](https://tailwindcss.com/docs/installation) and [tailwind-merge](https://github.com/dhiwise/tailwind-merge) and configure it yourself.
2. Add import alias for `@pswui-lib` in your `tsconfig.json` file.
All component file uses `../shared.tsx` to import `shared.tsx`. <Code language={"json"}>
You can simply put `shared.tsx` at the same level as component folder, but you can also change import path to yours. {`{\n "compilerOptions": {\n "paths": {\n "@pswui-lib": ["./pswui/lib.tsx"]\n }\n }\n}`}
</Code>
## CLI 3. Install [@psw-ui/cli](https://www.npmjs.com/package/@psw-ui/cli).
<Code language={"plaintext"}>
Now, we have our [CLI](https://www.npmjs.com/package/@psw-ui/cli) to automatically install component and shared core utility. {`$ npm install \@psw-ui/cli\n$ yarn add @psw-ui/cli\n$ pnpm add @psw-ui/cli`}
</Code>
You can simply type this: 4. Run CLI to add components
<Code language={"plaintext"}>
```shell {`$ npx pswui add <component>\n$ yarn pswui add <component>\n$ pnpm pswui add <component>`}
$ [packageManager] install @psw-ui/cli </Code>
5. Import component, and use it.
$ pswui [COMMAND] ... </TabContent>
``` <TabContent name="manual">
1. Install [TailwindCSS](https://tailwindcss.com/docs/installation) and [tailwind-merge](https://github.com/dhiwise/tailwind-merge) and configure it yourself.
### `pswui list` 2. Add import alias for `@pswui-lib` in your `tsconfig.json` file.
<Code language={"json"}>
`List` command prints the component registry, so you can check available or installed components. {`{\n "compilerOptions": {\n "paths": {\n "@pswui-lib": ["<your library file>"]\n }\n }\n}`}
</Code>
### `pswui add` 3. Grab the library file from [here](https://raw.githubusercontent.com/pswui/ui/main/packages/react/lib.tsx) and put it in the library file path in the tsconfig.
4. Now you can copy & paste your component in your project.
`Add` command install component provided to your project. </TabContent>
</TabProvider>
It adds:
* `shared.tsx` core utility
* `[component].tsx` component file
You can configure the installation path and import path by configuration file.
### Configuration
#### Naming
Basically, name of config file can be one of this:
* `pswui.config.js`
* `pswui.config.mjs`
* `pswui.config.cjs`
CLI takes default export, so you should make it export as default.
If you want to make CLi to take different config file, you can provide the configuration file name via flag:
```shell
$ pswui [COMMAND] -p pswui-config.js
$ pswui [COMMAND] --config=pswui-config.js
```
#### Type
There is export of `Config` type and `buildConfig` function in `@psw-ui/cli`.
You can leverage your IDE's intellisense with those.
```ts
import { Config } from "@psw-ui/cli"
const config: Config = {
/* ... */
}
export default config
```
```ts
import { buildConfig } from "@psw-ui/cli"
export default buildConfig({
/* ... */
})
```