├── .github
    └── workflows
    │   ├── deploy.yml
    │   └── release.yml
├── .gitignore
├── .prettierrc
├── LICENSE.md
├── README.md
├── components.json
├── eslint.config.js
├── index.html
├── lib
    ├── components
    │   ├── Error.tsx
    │   ├── Pert
    │   │   ├── ChartSVG.tsx
    │   │   ├── Pert.tsx
    │   │   └── PertChart.tsx
    │   ├── arrow
    │   │   ├── Arrows.tsx
    │   │   └── arrow.module.css
    │   ├── grid
    │   │   └── Grid.tsx
    │   └── task
    │   │   ├── Metrics.tsx
    │   │   ├── TaskLevel.tsx
    │   │   ├── TaskNode.tsx
    │   │   ├── Tasks.tsx
    │   │   └── task.module.css
    ├── constants
    │   ├── font.constants.ts
    │   └── pert.constants.ts
    ├── context
    │   └── pertContext.tsx
    ├── hooks
    │   └── usePertDimensions.ts
    ├── main.ts
    ├── types
    │   ├── global.types.ts
    │   ├── pert.types.ts
    │   └── task.types.ts
    └── utlis
    │   ├── Pert.ts
    │   └── generateKey.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.ts
├── public
    ├── cover.jpg
    ├── demo.jpg
    └── pert.svg
├── release.config.cjs
├── src
    ├── App.tsx
    ├── components
    │   ├── Color.tsx
    │   ├── CopyDrawer.tsx
    │   ├── PertChart.tsx
    │   ├── PertDetails.tsx
    │   ├── Sidebar.tsx
    │   ├── StyleOptions.tsx
    │   ├── TasksDrawer.tsx
    │   ├── mode-toggle.tsx
    │   ├── theme-provider.tsx
    │   └── ui
    │   │   ├── alert.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── drawer.tsx
    │   │   ├── input.tsx
    │   │   ├── label.tsx
    │   │   ├── popover.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── select.tsx
    │   │   ├── separator.tsx
    │   │   ├── slider.tsx
    │   │   ├── switch.tsx
    │   │   ├── tabs.tsx
    │   │   └── textarea.tsx
    ├── constants
    │   └── initStates.ts
    ├── index.css
    ├── lib
    │   └── utils.ts
    ├── main.tsx
    └── vite-env.d.ts
├── tailwind.config.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts


/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |       - beta
 8 | 
 9 | jobs:
10 |   build:
11 |     name: Build
12 |     runs-on: ubuntu-latest
13 | 
14 |     steps:
15 |       - name: Checkout
16 |         uses: actions/checkout@v4
17 | 
18 |       - name: Setup Node.js
19 |         uses: actions/setup-node@v4
20 |         with:
21 |           node-version: "lts/*"
22 | 
23 |       - name: Install pnpm
24 |         uses: pnpm/action-setup@v4
25 |         with:
26 |           version: 9
27 | 
28 |       - name: Checkout repo
29 |         uses: actions/checkout@v4
30 | 
31 |       - name: Setup Node
32 |         uses: actions/setup-node@v4
33 | 
34 |       - name: Install dependencies
35 |         run: pnpm install --frozen-lockfile
36 | 
37 |       - name: Build project
38 |         run: pnpm build --mode app
39 | 
40 |       - name: Upload production-ready build files
41 |         uses: actions/upload-artifact@v4
42 |         with:
43 |           name: production-files
44 |           path: ./dist
45 | 
46 |   deploy:
47 |     name: Deploy
48 |     needs: build
49 |     runs-on: ubuntu-latest
50 |     if: github.ref == 'refs/heads/main'
51 | 
52 |     steps:
53 |       - name: Download artifact
54 |         uses: actions/download-artifact@v4
55 |         with:
56 |           name: production-files
57 |           path: ./dist
58 | 
59 |       - name: Deploy to GitHub Pages
60 |         uses: peaceiris/actions-gh-pages@v4
61 |         with:
62 |           github_token: ${{ secrets.GITHUB_TOKEN }}
63 |           publish_dir: ./dist
64 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |       - beta
 8 | 
 9 | permissions:
10 |   contents: read
11 | 
12 | jobs:
13 |   release:
14 |     runs-on: ubuntu-latest
15 |     permissions:
16 |       contents: write
17 |       issues: write
18 |       pull-requests: write
19 |       id-token: write
20 | 
21 |     steps:
22 |       - name: Checkout
23 |         uses: actions/checkout@v4
24 | 
25 |       - name: Setup Node.js
26 |         uses: actions/setup-node@v4
27 |         with:
28 |           node-version: "lts/*"
29 | 
30 |       - name: Install pnpm
31 |         uses: pnpm/action-setup@v4
32 |         with:
33 |           version: 9
34 | 
35 |       - name: Install dependencies
36 |         run: pnpm install --frozen-lockfile
37 | 
38 |       - name: Build
39 |         run: pnpm build --mode lib
40 | 
41 |       - name: Audit
42 |         run: npm audit signatures
43 | 
44 |       - name: Release
45 |         env:
46 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
47 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
48 |         run: npx semantic-release
49 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | *.tsbuildinfo
16 | # Editor directories and files
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "printWidth": 90
4 | }
5 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Youcef Hammadi [@ucfx](https://github.com/ucfx)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-pert
  2 | 
  3 | <img src="public/cover.jpg" />
  4 | 
  5 | [![-](https://img.shields.io/github/stars/ucfx/react-pert?style=for-the-badge&colorA=000000&colorB=6868ff)](https://github.com/ucfx/react-pert/stargazers)
  6 | [![-](https://img.shields.io/npm/v/react-pert?style=for-the-badge&colorA=000000&colorB=6868ff)](https://www.npmjs.com/package/react-pert)
  7 | [![Build Size](https://img.shields.io/bundlephobia/minzip/react-pert?label=bundle%20size&style=for-the-badge&colorA=000000&colorB=6868ff)](https://bundlephobia.com/result?p=react-pert)
  8 | [![Downloads](https://img.shields.io/npm/dt/react-pert.svg?style=for-the-badge&colorA=000000&colorB=6868ff)](https://www.npmjs.com/package/react-pert)
  9 | 
 10 | ## :star2: Overview
 11 | 
 12 | This package provides tools to calculate and visualize a PERT (Program Evaluation and Review Technique) diagram. It includes the following components and utilities:
 13 | 
 14 | - **`Pert`**: A component to render the PERT diagram.
 15 | - **`usePert`**: A custom hook to retrieve PERT results.
 16 | - **Chart Interaction**: Allows interaction with the diagram, enabling the selection of tasks and displaying only the path related to the selected task.
 17 | 
 18 | ### :rocket: Progress
 19 | 
 20 | - :white_check_mark: **PERT Calculator**: Fully functional.
 21 | - :white_check_mark: **PERT Diagram**: Fully functional.
 22 | 
 23 | ### :computer: Demo
 24 | 
 25 | Check out the live demo [here](https://ucfx.github.io/react-pert/).
 26 | 
 27 | <img src="public/demo.jpg" />
 28 | 
 29 | ---
 30 | 
 31 | ## :clipboard: Installation
 32 | 
 33 | Install the package via npm:
 34 | 
 35 | ```bash
 36 | npm install react-pert
 37 | ```
 38 | 
 39 | ---
 40 | 
 41 | ## :book: Usage
 42 | 
 43 | ### Using `Pert` Component
 44 | 
 45 | ```jsx
 46 | import { Pert, type TaskInput } from "react-pert";
 47 | 
 48 | const App = () => {
 49 |   const tasks: TaskInput[] = [
 50 |     { key: "1", duration: 5, text: "A" },
 51 |     { key: "2", duration: 4, text: "B" },
 52 |     { key: "3", duration: 2, text: "C", dependsOn: ["1"] },
 53 |     { key: "4", duration: 3, text: "D", dependsOn: ["2"] },
 54 |     //...
 55 |   ];
 56 | 
 57 |   return <Pert tasks={tasks} />;
 58 | };
 59 | ```
 60 | 
 61 | ### Using `usePert` Hook
 62 | 
 63 | You need to wrap your application with `PertProvider` to use the `usePert` hook. Here is an example of how you can use it:
 64 | 
 65 | - **Note**: You should put the `Pert` component and `usePert` hook in the same `PertProvider` to ensure that the PERT data is available to both.
 66 | 
 67 | ```jsx
 68 | import { PertProvider, usePert, type TaskInput } from "react-pert";
 69 | 
 70 | const App = () => {
 71 |   const tasks: TaskInput[] = [
 72 |     { key: "1", duration: 5, text: "A" },
 73 |     { key: "2", duration: 4, text: "B" },
 74 |     { key: "3", duration: 2, text: "C", dependsOn: ["1"] },
 75 |     { key: "4", duration: 3, text: "D", dependsOn: ["2"] },
 76 |     //...
 77 |   ];
 78 |   return (
 79 |     <PertProvider>
 80 |       <Pert tasks={tasks} />
 81 |       <PertDetails />
 82 |     </PertProvider>
 83 |   );
 84 | };
 85 | ```
 86 | 
 87 | ```jsx
 88 | import { usePert } from "react-pert";
 89 | 
 90 | const PertDetails = () => {
 91 |   const { projectDuration, criticalPaths } = usePert();
 92 | 
 93 |   return (
 94 |     <div>
 95 |       <h3>Project Duration : {projectDuration}</h3>
 96 |       <h3>Critical Paths:</h3>
 97 |       <div>
 98 |         {criticalPaths.map((cp, index) => (
 99 |           <div key={index}>
100 |             {cp.map((p, i) => (
101 |               <span key={i}>
102 |                 {p.text}
103 |                 {i < cp.length - 1 && " → "}
104 |               </span>
105 |             ))}
106 |           </div>
107 |         ))}
108 |       </div>
109 |     </div>
110 |   );
111 | };
112 | ```
113 | 
114 | ---
115 | 
116 | ## :bulb: Examples
117 | 
118 | - ### setSelectedTask
119 | 
120 | You can use the `setSelectedTask` function to select a task in the PERT diagram. This function is available when you import `setSelectedTask` from `react-pert`.
121 | 
122 | ```typescript
123 | setSelectedTask: (taskKey: string | null) => void;
124 | ```
125 | 
126 | ```jsx
127 | import { Pert, PertProvider, setSelectedTask } from "react-pert";
128 | 
129 | const App = () => {
130 |   const tasks = [
131 |     { key: "1", duration: 5, text: "A" },
132 |     //...
133 |   ];
134 | 
135 |   const handleClick = () => {
136 |     setSelectedTask("1");
137 |   };
138 |   const handleClear = () => {
139 |     setSelectedTask(null);
140 |   };
141 | 
142 |   return (
143 |     // PertProvider is optional if you are using only setSelectedTask
144 |     <PertProvider>
145 |       <Pert tasks={tasks} />
146 |       <button onClick={handleClick}>Select Task 1</button>
147 |       <button onClick={handleClear}>Clear Selection</button>
148 |     </PertProvider>
149 |   );
150 | };
151 | ```
152 | 
153 | - ### onSelect
154 | 
155 | You can use the `onSelect` prop to get the selected task when a task is selected in the PERT diagram.
156 | 
157 | ```typescript
158 | onSelect?: (task: Task) => void;
159 | ```
160 | 
161 | ```jsx
162 | import { Pert } from "react-pert";
163 | 
164 | const App = () => {
165 |   const tasks = [/*...*/];
166 |   const handleSelect = (task) => {
167 |     console.log("Selected Task:", task);
168 |   };
169 | 
170 |   return <Pert tasks={tasks} onSelect={handleSelect} />;
171 | };
172 | ```
173 | 
174 | - ### `usePert` with `PertOptions`
175 | 
176 | You can pass options to the `usePert` hook to customize the output data.
177 | 
178 | ```typescript
179 | const results = usePert({ bounds: true });
180 | ```
181 | - Default: `true`
182 | 
183 | The `usePert` hook can be customized using the `bounds` option to include or exclude boundary tasks (Start and Finish) in the returned tasks.
184 | 
185 | #### Input
186 | 
187 | ```jsx
188 | const input: TaskInput[] = [
189 |   { key: "1", duration: 5, text: "A" },
190 |   { key: "2", duration: 4, text: "B", dependsOn: ["1"] },
191 |   { key: "3", duration: 2, text: "C", dependsOn: ["2"] },
192 | ];
193 | ```
194 | 
195 | #### Output with `bounds = true`
196 | 
197 | When `bounds` is set to `true`, the Start and Finish tasks are included:
198 | 
199 | ```jsx
200 | const output: Task[] = [
201 |   { key: "Start", text: "Start", duration: 0, dependsOn: [] },
202 |   { key: "1", text: "A", duration: 5, dependsOn: ["Start"], ...rest /* other properties */ },
203 |   { key: "2", text: "B", duration: 4, dependsOn: ["1"], ...rest /* other properties */ },
204 |   { key: "3", text: "C", duration: 2, dependsOn: ["2"], ...rest /* other properties */ },
205 |   { key: "Finish", text: "Finish", duration: 0, dependsOn: ["3"] },
206 | ];
207 | ```
208 | 
209 | #### Output with `bounds = false`
210 | 
211 | When `bounds` is set to `false`, the Start and Finish tasks are excluded:
212 | 
213 | ```jsx
214 | const output: Task[] = [
215 |   { key: "1", text: "A", duration: 5, dependsOn: [], ...rest /* other properties */,},
216 |   { key: "2", text: "B", duration: 4, dependsOn: ["1"], ...rest /* other properties */ },
217 |   { key: "3", text: "C", duration: 2, dependsOn: ["2"], ...rest /* other properties */ },
218 | ];
219 | ```
220 | 
221 | ## :books: API Reference
222 | 
223 | ### `PertProps`
224 | 
225 | | Attribute   | Type                        | Description                                                     |
226 | | ----------- | --------------------------- | --------------------------------------------------------------- |
227 | | `tasks`     | [`TaskInput[]`](#taskinput) | Array of tasks to be used for the calculation and PERT diagram. |
228 | | `styles?`   | [`PertStyles`](#pertstyles) | Optional styles configuration for the PERT chart.               |
229 | | `onSelect?` | `(task: `[`Task`](#task)`) => void`      | Optional callback invoked when a task is selected.              |
230 | 
231 | ### `Pert`
232 | 
233 | A visual representation of the PERT diagram (currently in development).
234 | 
235 | ---
236 | 
237 | ### `usePert`
238 | 
239 | #### Options:
240 | 
241 | ### `PertOptions`
242 | 
243 | | Attribute | Type      | Description                                                                                                        |
244 | | --------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
245 | | `bounds`  | `boolean` | Determines whether the boundary tasks (Start and Finish) should be included in the returned tasks. Default: `true` |
246 | 
247 | - If `true`, the Start and Finish tasks will be included.
248 | - If `false`, the Start and Finish tasks will be excluded.
249 | - Default: `true`
250 | 
251 | #### Returns:
252 | 
253 | - **`PertDataType`**: Contains all PERT data including tasks, levels, links, critical paths, and project duration.
254 | 
255 | ### `PertDataType`
256 | 
257 | | Attribute         | Type                              | Description                                                 |
258 | | ----------------- | --------------------------------- | ----------------------------------------------------------- |
259 | | `tasks`           | [`Task[]`](#task)                 | Array of tasks with PERT calculation results.               |
260 | | `levels`          | [`LevelType`](#leveltype)         | Mapping of task keys to their respective levels.            |
261 | | `links`           | [`LinkType[]`](#linktype)         | Array of links representing the dependencies between tasks. |
262 | | `criticalPaths`   | [`CriticalPath[]`](#criticalpath) | Array of critical paths in the project.                     |
263 | | `projectDuration` | `number`                          | Total duration of the project.                              |
264 | | `error?`          | `string \| null`                  | Current error message, if any.                              |
265 | 
266 | ### `TaskInput`
267 | 
268 | Represents a task with input data for PERT calculation.
269 | 
270 | | Attribute    | Type       | Description                                                     |
271 | | ------------ | ---------- | --------------------------------------------------------------- |
272 | | `key`        | `string`   | Unique identifier for the task.                                 |
273 | | `text`       | `string`   | Description or name of the task.                                |
274 | | `duration`   | `number`   | Duration of the task in some unit (e.g., days).                 |
275 | | `dependsOn?` | `string[]` | Array of task keys that the current task depends on (optional). |
276 | 
277 | ### `Task`
278 | 
279 | Represents a task with PERT calculation results.
280 | 
281 | | Attribute     | Type       | Description                                  |
282 | | ------------- | ---------- | -------------------------------------------- |
283 | | `key`         | `string`   | Unique identifier for the task.              |
284 | | `text`        | `string`   | Description or name of the task.             |
285 | | `duration`    | `number`   | Duration of the task.                        |
286 | | `dependsOn?`  | `string[]` | Array of task keys the task depends on.      |
287 | | `earlyStart`  | `number`   | The earliest start time for the task.        |
288 | | `earlyFinish` | `number`   | The earliest finish time for the task.       |
289 | | `lateStart`   | `number`   | The latest start time for the task.          |
290 | | `lateFinish`  | `number`   | The latest finish time for the task.         |
291 | | `level`       | `number`   | The level of the task in the PERT diagram.   |
292 | | `critical`    | `boolean`  | Indicates if the task is on a critical path. |
293 | | `freeFloat`   | `number`   | The free float time of the task.             |
294 | | `totalFloat`  | `number`   | The total float time of the task.            |
295 | | `index`       | `number`   | Index of the task in the sequence.           |
296 | 
297 | ### `PertStyles`
298 | 
299 | Styles configuration for the PERT chart.
300 | 
301 | | Attribute              | Type                         | Description                                              |
302 | | ---------------------- | ---------------------------- | -------------------------------------------------------- |
303 | | `disableGrid?`         | `boolean`                    | Whether to disable grid lines in the chart.              |
304 | | `taskSize?`            | `number`                     | Size of the task node in pixels.                         |
305 | | `fontFamily?`          | `string`                     | Font family for the text in the task nodes.              |
306 | | `fontSize?`            | [`FontSize`](#fontsize)      | Font size for the text in the task nodes.                |
307 | | `textColor?`           | `string`                     | Color of the text inside the task nodes.                 |
308 | | `chartBackground?`     | `string`                     | Background color of the entire chart.                    |
309 | | `taskBackground?`      | `string`                     | Background color of the task nodes.                      |
310 | | `gridColor?`           | `string`                     | Color of the grid lines in the chart.                    |
311 | | `borderWidth?`         | `number`                     | Width of the border for task nodes.                      |
312 | | `selectedBorderWidth?` | `number`                     | Width of the border for selected task nodes.             |
313 | | `hoverBorderWidth?`    | `number`                     | Width of the border when hovering over task nodes.       |
314 | | `borderColor?`         | `string`                     | Color of the border for task nodes.                      |
315 | | `selectedBorderColor?` | `string`                     | Color of the border for selected task nodes.             |
316 | | `criticalColor?`       | `string`                     | Color for critical path elements (e.g., tasks or links). |
317 | | `arrowColor?`          | `string`                     | Color of the arrows (links) between task nodes.          |
318 | | `arrowWidth?`          | `number`                     | Width of the arrows (links) between task nodes.          |
319 | | `gap?`                 | `{ x?: number; y?: number }` | Gap between task nodes in the chart.                     |
320 | 
321 | ### `FontSize`
322 | 
323 | | Type                                                                      | Description                                   |
324 | | ------------------------------------------------------------------------- | --------------------------------------------- |
325 | | `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, `"3xl"`, `string & {}`, `number` | Font size options for text in the task nodes. |
326 | 
327 | ### `LevelType`
328 | 
329 | Represents a mapping of task keys to their respective levels in the PERT diagram.
330 | 
331 | | Attribute | Type       | Description                               |
332 | | --------- | ---------- | ----------------------------------------- |
333 | | `key`     | `number`   | The level number in the PERT diagram.     |
334 | | `value`   | `string[]` | Array of task keys at the specific level. |
335 | 
336 | ### `LinkType`
337 | 
338 | Represents a link between two tasks in the PERT diagram.
339 | 
340 | | Attribute  | Type      | Description                                       |
341 | | ---------- | --------- | ------------------------------------------------- |
342 | | `from`     | `string`  | The task key from which the link originates.      |
343 | | `to`       | `string`  | The task key to which the link leads.             |
344 | | `critical` | `boolean` | Indicates if the link is part of a critical path. |
345 | 
346 | ### `CriticalPath`
347 | 
348 | Represents a critical path in the PERT diagram.
349 | 
350 | |                | Type                       | Description                                                               |
351 | | -------------- | -------------------------- | ------------------------------------------------------------------------- |
352 | | `CriticalPath` | [`PathItem[]`](#pathitem)  | An array of tasks (`PathItem`) forming the critical path.                 |
353 | 
354 | ### `PathItem`
355 | 
356 | | Attribute | Type     | Description                        |
357 | | --------- | -------- | ---------------------------------- |
358 | | `text`    | `string` | Description or name of the task.   |
359 | | `key`     | `string` | Task key identifier.               |
360 | 
361 | ---
362 | 
363 | ## :handshake: Contributing
364 | 
365 | We welcome contributions! If you encounter any bugs or have feature requests, please open an issue or submit a pull request.
366 | 
367 | ---
368 | 
369 | ## :page_with_curl: License
370 | 
371 | This package is open-source and licensed under the [MIT License](LICENSE.md).
372 | 
373 | Enjoy building with **PERT Diagram**! :relaxed:
374 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" class="dark">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 |     <link rel="icon" type="image/svg+xml" href="/pert.svg" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>react-pert Demo</title>
 9 | </head>
10 | 
11 | <body>
12 |     <div id="root"></div>
13 |     <script type="module" src="/src/main.tsx"></script>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/lib/components/Error.tsx:
--------------------------------------------------------------------------------
 1 | export default function Error({ error }: { error: string }) {
 2 |   return (
 3 |     <div
 4 |       style={{
 5 |         display: "flex",
 6 |         justifyContent: "center",
 7 |         alignItems: "center",
 8 |         fontSize: "1.5rem",
 9 |         padding: "3rem",
10 |       }}
11 |     >
12 |       {error}
13 |     </div>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/lib/components/Pert/ChartSVG.tsx:
--------------------------------------------------------------------------------
  1 | import { Arrows } from "../arrow/Arrows";
  2 | import Tasks from "../task/Tasks";
  3 | import Grid from "../grid/Grid";
  4 | import { InternalPertResultType, PertStyles } from "../../types/pert.types";
  5 | import {
  6 |   DEFAULT_CHART_STYLES,
  7 |   DEFAULT_COLORS,
  8 |   DEFAULT_WIDTH,
  9 | } from "../../constants/pert.constants";
 10 | import { ChartDimensions } from "../../types/task.types";
 11 | 
 12 | export interface ChartSVGProps {
 13 |   size: ChartDimensions;
 14 |   pertData: InternalPertResultType;
 15 |   selectedTask: string | null;
 16 |   hoveredTask: string | null;
 17 |   setHoveredTask: (taskKey: string | null) => void;
 18 |   styles: Omit<PertStyles, "gap" | "taskSize" | "fontSize"> & {
 19 |     gap: {
 20 |       x: number;
 21 |       y: number;
 22 |     };
 23 |     taskSize: number;
 24 |     fontSize: string;
 25 |   };
 26 | }
 27 | 
 28 | export const ChartSVG: React.FC<ChartSVGProps> = ({
 29 |   size,
 30 |   pertData,
 31 |   selectedTask,
 32 |   setHoveredTask,
 33 |   hoveredTask,
 34 |   styles: {
 35 |     fontSize,
 36 |     taskSize,
 37 |     gap,
 38 |     disableGrid,
 39 |     taskBackground,
 40 |     selectedBorderColor,
 41 |     borderColor,
 42 |     criticalColor,
 43 |     arrowColor,
 44 |     arrowWidth: arrowWidth,
 45 |     chartBackground,
 46 |     textColor,
 47 |     fontFamily,
 48 |     borderWidth,
 49 |     hoverBorderWidth,
 50 |     selectedBorderWidth,
 51 |     gridColor,
 52 |   },
 53 | }) => {
 54 |   const taskStyles = {
 55 |     "--task-bg": taskBackground ?? DEFAULT_COLORS.TASK_BG,
 56 |     "--task-bg-critical": criticalColor ?? DEFAULT_COLORS.CRITICAL,
 57 |     "--task-stroke-color": borderColor ?? DEFAULT_COLORS.STROKE,
 58 |     "--task-stroke-width": borderWidth ?? DEFAULT_WIDTH.BORDER,
 59 |     "--task-stroke-hover-width": hoverBorderWidth ?? DEFAULT_WIDTH.HOVER_BORDER,
 60 |     "--task-selected-stroke-width": selectedBorderWidth ?? DEFAULT_WIDTH.SELECTED_BORDER,
 61 |     "--task-selected-stroke-color": selectedBorderColor ?? DEFAULT_COLORS.SELECTED,
 62 |     "--task-text-color": textColor ?? DEFAULT_COLORS.TEXT,
 63 |     "--task-font-family": fontFamily ?? "inherit",
 64 |   } as React.CSSProperties;
 65 | 
 66 |   const arrowStyles = {
 67 |     "--arrow-stroke-color": arrowColor ?? DEFAULT_COLORS.STROKE,
 68 |     "--arrow-critical-stroke-color": criticalColor ?? DEFAULT_COLORS.CRITICAL,
 69 |     "--arrow-stroke-width": arrowWidth ?? 2,
 70 |   } as React.CSSProperties;
 71 | 
 72 |   const chartStyles: React.CSSProperties = {
 73 |     ...DEFAULT_CHART_STYLES,
 74 |     fontSize,
 75 |     backgroundColor: chartBackground,
 76 |   };
 77 | 
 78 |   return (
 79 |     <svg
 80 |       width={size.width}
 81 |       height={size.height}
 82 |       viewBox={`0 0 ${size.width} ${size.height}`}
 83 |       xmlns="http://www.w3.org/2000/svg"
 84 |       style={chartStyles}
 85 |       dominantBaseline="central"
 86 |       textAnchor="middle"
 87 |     >
 88 |       <g className="content">
 89 |         {!disableGrid && <Grid size={size} taskSize={taskSize} strokeColor={gridColor} />}
 90 |         <Arrows
 91 |           gap={gap}
 92 |           arrows={pertData.links}
 93 |           taskSize={taskSize}
 94 |           size={size}
 95 |           levels={pertData.levels}
 96 |           tasks={pertData.tasks}
 97 |           selectedTask={selectedTask}
 98 |           hoveredTask={hoveredTask}
 99 |           arrowStyles={arrowStyles}
100 |         />
101 |         <Tasks
102 |           gap={gap}
103 |           size={size}
104 |           taskSize={taskSize}
105 |           tasks={pertData.tasks}
106 |           levels={pertData.levels}
107 |           selectedTask={selectedTask}
108 |           setHoveredTask={setHoveredTask}
109 |           taskStyles={taskStyles}
110 |         />
111 |       </g>
112 |     </svg>
113 |   );
114 | };
115 | 


--------------------------------------------------------------------------------
/lib/components/Pert/Pert.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { InternalPertProvider } from "../../context/pertContext";
 3 | import { PertProps, PertStyles } from "../../types/pert.types";
 4 | import PertChart from "./PertChart";
 5 | 
 6 | export const Pert: React.FunctionComponent<PertProps> = ({ styles, ...rest }) => (
 7 |   <InternalPertProvider>
 8 |     <div
 9 |       style={{
10 |         width: "fit-content",
11 |         height: "fit-content",
12 |         boxSizing: "border-box",
13 |       }}
14 |     >
15 |       <PertChart {...rest} styles={styles ?? ({} as PertStyles)} />
16 |     </div>
17 |   </InternalPertProvider>
18 | );
19 | 


--------------------------------------------------------------------------------
/lib/components/Pert/PertChart.tsx:
--------------------------------------------------------------------------------
  1 | import { useCallback, useEffect, useMemo, useRef, useState } from "react";
  2 | import { usePertContext } from "../../context/pertContext";
  3 | import { ChartSVG } from "./ChartSVG";
  4 | import Error from "../Error";
  5 | import { PertStyles } from "../../types/pert.types";
  6 | import { DEFAULT_ERROR_DIMENSIONS } from "../../constants/pert.constants";
  7 | import { usePertDimensions } from "../../hooks/usePertDimensions";
  8 | import { FONT_SIZES } from "../../constants/font.constants";
  9 | import { Task, TaskInput } from "../../types/global.types";
 10 | 
 11 | export interface PertChartProps {
 12 |   tasks: TaskInput[];
 13 |   styles: PertStyles;
 14 |   taskSize?: number;
 15 |   onSelect?: (task: Task) => void;
 16 | }
 17 | 
 18 | let externalSetSelectedTask: {
 19 |   setter: React.Dispatch<React.SetStateAction<string | null>>;
 20 |   onSelect: ((task: any) => void) | undefined;
 21 |   getTask: ((task: string) => Task | undefined) | undefined;
 22 | } | null = null;
 23 | 
 24 | export const setSelectedTask = (taskKey: string | null) => {
 25 |   if (!externalSetSelectedTask) return;
 26 | 
 27 |   const { setter, onSelect, getTask } = externalSetSelectedTask;
 28 | 
 29 |   if (!taskKey) {
 30 |     setter(null);
 31 |     onSelect?.(null);
 32 |     return;
 33 |   }
 34 | 
 35 |   const task = getTask?.(taskKey) ?? null;
 36 |   onSelect?.(task);
 37 |   setter(task ? taskKey : null);
 38 | };
 39 | 
 40 | export const PertChart: React.FC<PertChartProps> = ({ tasks, onSelect, styles }) => {
 41 |   const { pertData, calculatePertResults, error } = usePertContext();
 42 |   const tasksHashRef = useRef<string>();
 43 |   const [selectedTask, setSelectedTaskState] = useState<string | null>(null);
 44 |   const [hoveredTask, setHoveredTaskState] = useState<string | null>(null);
 45 | 
 46 |   const getTask = (taskkey: string): Task | undefined => {
 47 |     return pertData.tasks.get(taskkey);
 48 |   };
 49 | 
 50 |   const setterRef = useRef(setSelectedTaskState);
 51 |   externalSetSelectedTask = { setter: setterRef.current, getTask, onSelect };
 52 | 
 53 |   useEffect(() => {
 54 |     const tasksHash = JSON.stringify(tasks);
 55 |     if (tasksHashRef.current !== tasksHash) {
 56 |       calculatePertResults(tasks);
 57 |       setSelectedTask(null);
 58 |       tasksHashRef.current = tasksHash;
 59 |     }
 60 |   }, [tasks, calculatePertResults]);
 61 | 
 62 |   const setHoveredTask = useCallback((taskKey: string | null) => {
 63 |     setHoveredTaskState(taskKey);
 64 |   }, []);
 65 | 
 66 |   const { gap: customGap, taskSize, fontSize } = styles;
 67 | 
 68 |   const customTaskSize = Math.max(taskSize ?? 100, 70);
 69 | 
 70 |   const gap = useMemo(
 71 |     () => ({
 72 |       x: Math.max(customTaskSize, customGap?.x ?? 0),
 73 |       y: Math.max(customTaskSize, customGap?.y ?? 0),
 74 |     }),
 75 |     [customGap?.x, customGap?.y, customTaskSize]
 76 |   );
 77 | 
 78 |   const size = usePertDimensions({ taskSize: customTaskSize, gap });
 79 | 
 80 |   const customFontSize = useMemo(() => {
 81 |     if (!fontSize) return FONT_SIZES.default;
 82 |     if (typeof fontSize === "number") return `${fontSize}px`;
 83 |     return FONT_SIZES[fontSize as keyof typeof FONT_SIZES] || fontSize;
 84 |   }, [fontSize]);
 85 | 
 86 |   if (error) {
 87 |     return <Error error={error} />;
 88 |   }
 89 | 
 90 |   return (
 91 |     <ChartSVG
 92 |       size={error ? DEFAULT_ERROR_DIMENSIONS : size}
 93 |       pertData={pertData}
 94 |       selectedTask={selectedTask}
 95 |       hoveredTask={hoveredTask}
 96 |       setHoveredTask={setHoveredTask}
 97 |       styles={{ ...styles, fontSize: customFontSize, taskSize: customTaskSize, gap }}
 98 |     />
 99 |   );
100 | };
101 | 
102 | export default PertChart;
103 | 


--------------------------------------------------------------------------------
/lib/components/arrow/Arrows.tsx:
--------------------------------------------------------------------------------
 1 | import { LevelType, LinkType } from "../../types/global.types";
 2 | import { InternalTaskResultType } from "../../types/pert.types";
 3 | import styles from "./arrow.module.css";
 4 | 
 5 | interface ArrowsProps {
 6 |   arrows: LinkType[];
 7 |   levels: LevelType;
 8 |   taskSize: number;
 9 |   size: { width: number; height: number };
10 |   gap: {
11 |     x: number;
12 |     y: number;
13 |   };
14 |   tasks: InternalTaskResultType;
15 |   selectedTask: string | null;
16 |   hoveredTask: string | null;
17 |   arrowStyles: React.CSSProperties;
18 | }
19 | export const Arrows: React.FC<ArrowsProps> = ({
20 |   arrows,
21 |   taskSize,
22 |   levels,
23 |   size,
24 |   gap,
25 |   tasks,
26 |   selectedTask,
27 |   hoveredTask,
28 |   arrowStyles,
29 | }) => {
30 |   const isArrowVisible = (fromTaskKey: string, toTaskKey: string) => {
31 |     return (
32 |       selectedTask === fromTaskKey ||
33 |       selectedTask === toTaskKey ||
34 |       hoveredTask === fromTaskKey ||
35 |       hoveredTask === toTaskKey
36 |     );
37 |   };
38 | 
39 |   const getTaskPosition = (taskKey: string, isFrom = false) => {
40 |     const task = tasks.get(taskKey)!;
41 |     const level = task.level;
42 |     const index = levels.get(level)!.findIndex((t) => t === taskKey);
43 |     const arrLength = levels.get(level)!.length;
44 |     const totalHeight = arrLength * taskSize + (arrLength - 1) * gap.y;
45 |     const offset = (size.height - totalHeight) / 2 + taskSize / 2;
46 |     const x = level * (taskSize + gap.x) + (isFrom ? taskSize * (3 / 2) : taskSize / 2);
47 |     const y = index * (taskSize + gap.y) + offset;
48 |     return { x, y, level, task };
49 |   };
50 | 
51 |   const className = `${styles.arrows} ${selectedTask ? styles.onSelect : ""} ${
52 |     hoveredTask ? styles.onHover : ""
53 |   }`;
54 | 
55 |   return (
56 |     <g className={className}>
57 |       {arrows.map((arrow, key) => {
58 |         const {
59 |           x: fromX,
60 |           y: fromY,
61 |           level: fromLevel,
62 |           task: fromTask,
63 |         } = getTaskPosition(arrow.from, true);
64 |         const {
65 |           x: toX,
66 |           y: toY,
67 |           level: toLevel,
68 |           task: toTask,
69 |         } = getTaskPosition(arrow.to);
70 | 
71 |         const className = `${styles.arrow} ${
72 |           isArrowVisible(fromTask.key, toTask.key) ? styles.visible : ""
73 |         } ${arrow.critical ? styles.critical : ""}`;
74 | 
75 |         return (
76 |           <path
77 |             className={className}
78 |             key={key}
79 |             d={`M ${fromX} ${fromY} C ${
80 |               fromX + 20 * (toLevel - fromLevel) + (toX - fromX) / 1.2
81 |             } ${fromY} ${
82 |               fromX + 20 * (toLevel - fromLevel) + (toX - fromX) / 4
83 |             } ${toY} ${toX} ${toY}`}
84 |             style={arrowStyles}
85 |           />
86 |         );
87 |       })}
88 |     </g>
89 |   );
90 | };
91 | 


--------------------------------------------------------------------------------
/lib/components/arrow/arrow.module.css:
--------------------------------------------------------------------------------
 1 | .arrows {
 2 |   .arrow {
 3 |     fill: transparent;
 4 |     stroke: var(--arrow-stroke-color);
 5 |     stroke-width: var(--arrow-stroke-width);
 6 |     transition: stroke .2s, stroke-width 0.2s, opacity .2s;
 7 | 
 8 |     &.critical {
 9 |       stroke: var(--arrow-critical-stroke-color);
10 |     }
11 |   }
12 | 
13 |   &.onHover .arrow {
14 |     opacity: .3;
15 |   }
16 | 
17 |   &.onSelect .arrow {
18 |     opacity: 0;
19 |   }
20 | 
21 |   &.onSelect .arrow,
22 |   &.onHover .arrow {
23 | 
24 |     &.hover,
25 |     &.visible {
26 |       stroke-width: calc(var(--arrow-stroke-width) + 1);
27 |       opacity: 1;
28 |     }
29 |   }
30 | 
31 | }


--------------------------------------------------------------------------------
/lib/components/grid/Grid.tsx:
--------------------------------------------------------------------------------
 1 | import { DEFAULT_COLORS } from "../../constants/pert.constants";
 2 | 
 3 | interface GridProps {
 4 |   size: { width: number; height: number };
 5 |   taskSize: number;
 6 |   strokeColor: string | undefined;
 7 | }
 8 | 
 9 | export default function Grid({ size, taskSize, strokeColor }: GridProps) {
10 |   const rowCount = Math.ceil(size.height / taskSize) + 1;
11 |   const colCount = Math.ceil(size.width / taskSize) + 1;
12 | 
13 |   const renderLines = (count: number, isVertical: boolean, totalLength: number) =>
14 |     Array.from({ length: count }, (_, i) => {
15 |       const pos = i * taskSize;
16 |       return (
17 |         <line
18 |           key={i}
19 |           x1={isVertical ? pos : 0}
20 |           y1={isVertical ? 0 : pos}
21 |           x2={isVertical ? pos : totalLength}
22 |           y2={isVertical ? totalLength : pos}
23 |           style={{
24 |             stroke: strokeColor ?? DEFAULT_COLORS.GRID,
25 |           }}
26 |         />
27 |       );
28 |     });
29 | 
30 |   return (
31 |     <g>
32 |       <g>{renderLines(rowCount, false, size.width)}</g>
33 |       <g>{renderLines(colCount, true, size.height)}</g>
34 |     </g>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/lib/components/task/Metrics.tsx:
--------------------------------------------------------------------------------
 1 | import { Task } from "../../types/global.types";
 2 | import { TaskDimensions } from "../../types/task.types";
 3 | 
 4 | interface TaskMetricsProps {
 5 |   task: Task;
 6 |   x: number;
 7 |   y: number;
 8 |   dimensions: TaskDimensions;
 9 | }
10 | 
11 | const Metrics: React.FC<TaskMetricsProps> = ({ task, x, y, dimensions }) => {
12 |   const { halfRadius, twoThirdsRadius } = dimensions;
13 |   return (
14 |     <>
15 |       <text x={x - halfRadius} y={y - twoThirdsRadius} fill="black">
16 |         {task.earlyStart}
17 |       </text>
18 |       <text x={x + halfRadius} y={y - twoThirdsRadius} fill="black">
19 |         {task.earlyFinish}
20 |       </text>
21 |       <text x={x - halfRadius} y={y + twoThirdsRadius} fill="black">
22 |         {task.lateStart}
23 |       </text>
24 |       <text x={x + halfRadius} y={y + twoThirdsRadius} fill="black">
25 |         {task.lateFinish}
26 |       </text>
27 |     </>
28 |   );
29 | };
30 | 
31 | export default Metrics;
32 | 


--------------------------------------------------------------------------------
/lib/components/task/TaskLevel.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Task } from "../../types/global.types";
 3 | import { TaskDimensions } from "../../types/task.types";
 4 | import TaskNode from "./TaskNode";
 5 | 
 6 | interface TaskLevelProps {
 7 |   level: number;
 8 |   keyList: string[];
 9 |   tasks: Map<string, Task>;
10 |   taskSize: number;
11 |   gap: {
12 |     x: number;
13 |     y: number;
14 |   };
15 |   offset: number;
16 |   dimensions: TaskDimensions;
17 |   selectedTask: string | null;
18 |   onHover: (key: string, isHovering: boolean) => void;
19 |   onTaskClick: (taskKey: string) => void;
20 |   taskStyles: React.CSSProperties;
21 | }
22 | 
23 | const TaskLevel: React.FC<TaskLevelProps> = ({
24 |   level,
25 |   keyList,
26 |   tasks,
27 |   taskSize,
28 |   gap,
29 |   offset,
30 |   dimensions,
31 |   selectedTask,
32 |   onHover,
33 |   onTaskClick,
34 |   taskStyles,
35 | }) => {
36 |   return (
37 |     <g>
38 |       {keyList.map((key, index) => {
39 |         const task = tasks.get(key);
40 |         if (!task) return null;
41 | 
42 |         const x = level * taskSize + taskSize + gap.x * level;
43 |         const y = index * (taskSize + gap.y) + offset;
44 |         const isVisible = Boolean(
45 |           selectedTask &&
46 |             (task.dependsOn?.includes(selectedTask) ||
47 |               tasks.get(selectedTask)?.dependsOn?.includes(task.key))
48 |         );
49 | 
50 |         const isSelected = task.key === selectedTask;
51 |         return (
52 |           <TaskNode
53 |             key={task.key}
54 |             task={task}
55 |             x={x}
56 |             y={y}
57 |             dimensions={dimensions}
58 |             onHover={onHover}
59 |             onTaskClick={onTaskClick}
60 |             isSelected={isSelected}
61 |             isVisible={isVisible}
62 |             taskStyles={taskStyles}
63 |           />
64 |         );
65 |       })}
66 |     </g>
67 |   );
68 | };
69 | 
70 | export default React.memo(TaskLevel);
71 | 


--------------------------------------------------------------------------------
/lib/components/task/TaskNode.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useMemo } from "react";
 2 | import { Task } from "../../types/global.types";
 3 | import styles from "./task.module.css";
 4 | import Metrics from "./Metrics";
 5 | import { TaskDimensions } from "../../types/task.types";
 6 | 
 7 | interface TaskNodeProps {
 8 |   task: Task;
 9 |   x: number;
10 |   y: number;
11 |   dimensions: TaskDimensions;
12 |   onHover: (key: string, isHovering: boolean) => void;
13 |   onTaskClick: (taskKey: string) => void;
14 |   isVisible: boolean;
15 |   isSelected: boolean;
16 |   taskStyles: React.CSSProperties;
17 | }
18 | 
19 | const TaskNode: React.FC<TaskNodeProps> = ({
20 |   task,
21 |   x,
22 |   y,
23 |   dimensions,
24 |   onHover,
25 |   onTaskClick,
26 |   isVisible,
27 |   isSelected,
28 |   taskStyles,
29 | }) => {
30 |   const { radius } = dimensions;
31 |   const pathData = useMemo(
32 |     () => `
33 |     M ${x - radius} ${y - radius / 3}
34 |     L ${x + radius} ${y - radius / 3}
35 |     M ${x - radius} ${y + radius / 3}
36 |     L ${x + radius} ${y + radius / 3}
37 |     M ${x} ${y + radius / 3}
38 |     L ${x} ${y + radius}
39 |     M ${x} ${y - radius}
40 |     L ${x} ${y - radius / 3}
41 |   `,
42 |     [x, y, radius]
43 |   );
44 | 
45 |   return (
46 |     <g
47 |       className={`${styles.task} ${isSelected ? styles.selected : ""} ${
48 |         isVisible ? styles.visible : ""
49 |       } ${task.critical ? styles.critical : ""}`}
50 |       onMouseEnter={() => onHover(task.key, true)}
51 |       onMouseLeave={() => onHover(task.key, false)}
52 |       onClick={() => onTaskClick(task.key)}
53 |       style={taskStyles}
54 |     >
55 |       <rect
56 |         x={x - radius}
57 |         y={y - radius}
58 |         rx="20"
59 |         ry="20"
60 |         width={radius * 2}
61 |         height={radius * 2}
62 |       />
63 |       <text x={x} y={y}>
64 |         {task.text}
65 |       </text>
66 |       <Metrics task={task} x={x} y={y} dimensions={dimensions} />
67 |       <path d={pathData} fill="none" />
68 |     </g>
69 |   );
70 | };
71 | 
72 | export default React.memo(TaskNode);
73 | 


--------------------------------------------------------------------------------
/lib/components/task/Tasks.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useMemo, useCallback } from "react";
 2 | import styles from "./task.module.css";
 3 | import { setSelectedTask } from "../../components/Pert/PertChart";
 4 | import TaskLevel from "./TaskLevel";
 5 | import { Task } from "../../types/global.types";
 6 | 
 7 | export interface TasksProps {
 8 |   tasks: Map<string, Task>;
 9 |   levels: Map<number, string[]>;
10 |   taskSize: number;
11 |   size: {
12 |     width: number;
13 |     height: number;
14 |   };
15 |   gap: {
16 |     x: number;
17 |     y: number;
18 |   };
19 |   selectedTask: string | null;
20 |   setHoveredTask: (taskKey: string | null) => void;
21 |   taskStyles: React.CSSProperties;
22 | }
23 | 
24 | const Tasks: React.FC<TasksProps> = ({
25 |   tasks,
26 |   levels,
27 |   taskSize,
28 |   size,
29 |   gap,
30 |   selectedTask,
31 |   setHoveredTask,
32 |   taskStyles,
33 | }) => {
34 |   const dimensions = useMemo(
35 |     () => ({
36 |       radius: taskSize / 2,
37 |       halfRadius: taskSize / 4,
38 |       twoThirdsRadius: (taskSize / 6) * 2,
39 |     }),
40 |     [taskSize]
41 |   );
42 | 
43 |   const handleHover = useCallback(
44 |     (key: string, isHovering: boolean) => {
45 |       setHoveredTask(isHovering ? key : null);
46 |     },
47 |     [setHoveredTask]
48 |   );
49 | 
50 |   const handleTaskClick = useCallback(
51 |     (taskKey: string) => {
52 |       setSelectedTask(selectedTask !== taskKey ? taskKey : null);
53 |     },
54 |     [selectedTask]
55 |   );
56 | 
57 |   const renderedLevels = useMemo(() => {
58 |     return Array.from(levels.entries()).map(([levelNum, keyList]) => {
59 |       const totalHeight = keyList.length * taskSize + (keyList.length - 1) * gap.y;
60 |       const offset = (size.height - totalHeight) / 2 + dimensions.radius;
61 | 
62 |       return (
63 |         <TaskLevel
64 |           key={levelNum}
65 |           level={levelNum}
66 |           keyList={keyList}
67 |           tasks={tasks}
68 |           taskSize={taskSize}
69 |           gap={gap}
70 |           offset={offset}
71 |           dimensions={dimensions}
72 |           selectedTask={selectedTask}
73 |           onHover={handleHover}
74 |           onTaskClick={handleTaskClick}
75 |           taskStyles={taskStyles}
76 |         />
77 |       );
78 |     });
79 |   }, [
80 |     levels,
81 |     tasks,
82 |     taskSize,
83 |     gap,
84 |     size.height,
85 |     dimensions,
86 |     selectedTask,
87 |     handleHover,
88 |     handleTaskClick,
89 |     taskStyles,
90 |   ]);
91 | 
92 |   return <g className={styles.tasks}>{renderedLevels}</g>;
93 | };
94 | 
95 | export default React.memo(Tasks);
96 | 


--------------------------------------------------------------------------------
/lib/components/task/task.module.css:
--------------------------------------------------------------------------------
 1 | .tasks {
 2 |     .task {
 3 |         user-select: none;
 4 |         transition: filter .2s, opacity .2s;
 5 | 
 6 |         text {
 7 |             fill: var(--task-text-color);
 8 |             font-family: var(--task-font-family);
 9 |         }
10 | 
11 |         rect {
12 |             transition: stroke-width .2s;
13 |             stroke: var(--task-stroke-color);
14 |             stroke-width: var(--task-stroke-width);
15 |             fill: var(--task-bg);
16 | 
17 |             &~path {
18 |                 stroke: var(--task-stroke-color);
19 |             }
20 |         }
21 | 
22 |         &.critical rect {
23 |             fill: var(--task-bg-critical);
24 |         }
25 | 
26 |         &:hover {
27 |             cursor: pointer;
28 |             filter: brightness(.9);
29 | 
30 |             rect {
31 |                 stroke-width: var(--task-stroke-hover-width);
32 |             }
33 |         }
34 | 
35 |         &.selected {
36 |             rect {
37 |                 stroke: var(--task-selected-stroke-color);
38 |                 stroke-width: var(--task-selected-stroke-width);
39 |             }
40 |         }
41 |     }
42 | 
43 |     &:has(.task.selected) {
44 |         .task:not(.selected):not(.visible) {
45 |             opacity: 0.7;
46 |             filter: brightness(0.6);
47 | 
48 |             &:hover {
49 |                 cursor: pointer;
50 |                 filter: brightness(.9);
51 |                 opacity: 1;
52 | 
53 |                 rect {
54 |                     stroke: var(--task-stroke-color);
55 |                     stroke-linejoin: bevel;
56 |                 }
57 |             }
58 |         }
59 |     }
60 | }


--------------------------------------------------------------------------------
/lib/constants/font.constants.ts:
--------------------------------------------------------------------------------
 1 | export const FONT_SIZES = {
 2 |   sm: "0.75rem",
 3 |   md: "1rem",
 4 |   lg: "1.25rem",
 5 |   xl: "1.5rem",
 6 |   "2xl": "1.75rem",
 7 |   "3xl": "2rem",
 8 |   default: "1rem",
 9 |   min: "0.75rem",
10 |   max: "2rem",
11 | } as const;
12 | 


--------------------------------------------------------------------------------
/lib/constants/pert.constants.ts:
--------------------------------------------------------------------------------
 1 | export const DEFAULT_ERROR_DIMENSIONS = {
 2 |   width: 300,
 3 |   height: 200,
 4 | } as const;
 5 | 
 6 | export const DEFAULT_CHART_STYLES = {
 7 |   display: "block",
 8 |   boxSizing: "border-box",
 9 |   transition: "width 0.3s ease, height 0.3s ease",
10 | } as const;
11 | 
12 | export const DEFAULT_COLORS = {
13 |   CRITICAL: "#ff9147",
14 |   TASK_BG: "#aaaeff",
15 |   CHART_BG: "#fff",
16 |   GRID: "#83838350",
17 |   TEXT: "#000",
18 |   SELECTED: "#6868ff",
19 |   STROKE: "#615f77",
20 | } as const;
21 | 
22 | export const DEFAULT_WIDTH = {
23 |   BORDER: 1,
24 |   HOVER_BORDER: 2,
25 |   SELECTED_BORDER: 3,
26 | } as const;
27 | 


--------------------------------------------------------------------------------
/lib/context/pertContext.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, ReactNode, useCallback, useContext, useState } from "react";
 2 | import { TaskInput, PertOptions } from "../types/global.types.ts";
 3 | import {
 4 |   InternalPertResultType,
 5 |   InternalPertContextType,
 6 |   PertDataType,
 7 | } from "../types/pert.types.ts";
 8 | import PertCalculator from "../utlis/Pert.ts";
 9 | 
10 | const EMPTY_RESULT: InternalPertResultType = {
11 |   tasks: new Map(),
12 |   levels: new Map(),
13 |   links: [],
14 |   criticalPaths: [],
15 |   projectDuration: 0,
16 | };
17 | 
18 | const pertContext = createContext<InternalPertContextType | null>(null);
19 | const internalPertContext = createContext<InternalPertContextType | null>(null);
20 | 
21 | const createPertProvider = (Context: React.Context<InternalPertContextType | null>) => {
22 |   return ({ children }: { children: ReactNode }) => {
23 |     const [pertData, setPertResults] = useState<InternalPertResultType>(EMPTY_RESULT);
24 |     const [error, setError] = useState<string | null>(null);
25 | 
26 |     const calculatePertResults = useCallback((data: TaskInput[]) => {
27 |       try {
28 |         const results: InternalPertResultType = new PertCalculator(data).solve();
29 |         setPertResults(results);
30 |         setError(null);
31 |       } catch (err: any) {
32 |         console.error(err);
33 |         setPertResults(EMPTY_RESULT);
34 |         setError(err.message);
35 |       }
36 |     }, []);
37 | 
38 |     return (
39 |       <Context.Provider
40 |         value={{
41 |           pertData,
42 |           calculatePertResults,
43 |           error,
44 |         }}
45 |       >
46 |         {children}
47 |       </Context.Provider>
48 |     );
49 |   };
50 | };
51 | 
52 | export const PertProvider = createPertProvider(pertContext);
53 | export const InternalPertProvider = createPertProvider(internalPertContext);
54 | 
55 | export const usePert = (options: PertOptions = { bounds: true }) => {
56 |   const context = useContext(pertContext);
57 |   if (!context) {
58 |     throw new Error("usePertData must be used within a PertProvider");
59 |   }
60 |   const tasksArr = Array.from(context.pertData.tasks.values());
61 |   const tasks = options?.bounds
62 |     ? tasksArr.slice(1, -1).map((task) => ({
63 |         ...task,
64 |         dependsOn: task.dependsOn?.includes(tasksArr[0].key) ? [] : task.dependsOn,
65 |       }))
66 |     : tasksArr;
67 | 
68 |   return {
69 |     ...context.pertData,
70 |     tasks,
71 |     error: context.error,
72 |     projectDuration: context.pertData.projectDuration,
73 |   } as PertDataType;
74 | };
75 | 
76 | export const usePertContext = () => {
77 |   const context = useContext(pertContext);
78 |   if (!context) {
79 |     const internalContext = useContext(internalPertContext);
80 |     if (!internalContext) {
81 |       throw new Error(
82 |         "usePertData must be used within a PertProvider or InternalPertProvider"
83 |       );
84 |     }
85 |     return internalContext;
86 |   }
87 |   return context;
88 | };
89 | 


--------------------------------------------------------------------------------
/lib/hooks/usePertDimensions.ts:
--------------------------------------------------------------------------------
 1 | import { useMemo } from "react";
 2 | import { ChartDimensions } from "../types/task.types";
 3 | import { usePertContext } from "../context/pertContext";
 4 | 
 5 | interface UsePertDimensionsProps {
 6 |   taskSize: number;
 7 |   gap: { x: number; y: number };
 8 | }
 9 | 
10 | export const usePertDimensions = ({
11 |   taskSize,
12 |   gap,
13 | }: UsePertDimensionsProps): ChartDimensions => {
14 |   const { pertData } = usePertContext();
15 | 
16 |   return useMemo(() => {
17 |     const levelValues = Array.from(pertData.levels.values());
18 |     if (!levelValues.length) {
19 |       return { width: 0, height: 0 };
20 |     }
21 | 
22 |     const maxNodesPerLevel = Math.max(...levelValues.map((nodes) => nodes.length));
23 | 
24 |     return {
25 |       width: (levelValues.length + 1) * taskSize + (levelValues.length - 1) * gap.x,
26 |       height: (maxNodesPerLevel + 1) * taskSize + (maxNodesPerLevel - 1) * gap.y,
27 |     };
28 |   }, [pertData.levels, taskSize, gap]);
29 | };
30 | 


--------------------------------------------------------------------------------
/lib/main.ts:
--------------------------------------------------------------------------------
1 | export { Pert } from "./components/Pert/Pert";
2 | export { setSelectedTask } from "./components/Pert/PertChart";
3 | export type * from "./types/global.types";
4 | export type { PertStyles, PertProps, PertDataType, FontSize } from "./types/pert.types";
5 | export { PertProvider, usePert } from "./context/pertContext";
6 | 


--------------------------------------------------------------------------------
/lib/types/global.types.ts:
--------------------------------------------------------------------------------
 1 | export type TaskInput = {
 2 |   key: string;
 3 |   text: string;
 4 |   duration: number;
 5 |   dependsOn?: string[];
 6 | };
 7 | 
 8 | export type Task = TaskInput & {
 9 |   earlyStart: number;
10 |   earlyFinish: number;
11 |   lateStart: number;
12 |   lateFinish: number;
13 |   level: number;
14 |   critical: boolean;
15 |   freeFloat: number;
16 |   totalFloat: number;
17 |   index: number;
18 | };
19 | 
20 | export type LevelType = Map<number, string[]>;
21 | 
22 | export type LinkType = {
23 |   from: string;
24 |   to: string;
25 |   critical: boolean;
26 | };
27 | 
28 | type PathItem = {
29 |   text: string;
30 |   key: string;
31 | };
32 | 
33 | export type CriticalPath = PathItem[];
34 | 
35 | export interface PertOptions {
36 |   /**
37 |    * Determines whether the boundary tasks (Start and Finish) should be included in the returned tasks.
38 |    * - If `true`, the Start and Finish tasks will be included.
39 |    * - If `false`, the Start and Finish tasks will be excluded.
40 |    * @type {boolean}
41 |    * @default true
42 |    */
43 |   bounds?: boolean;
44 | }
45 | 


--------------------------------------------------------------------------------
/lib/types/pert.types.ts:
--------------------------------------------------------------------------------
  1 | import { CriticalPath, LevelType, LinkType, Task } from "./global.types";
  2 | import { TaskInput } from "./global.types";
  3 | 
  4 | // dont care about this type
  5 | export type InternalTaskResultType = Map<string, Task>;
  6 | 
  7 | // dont care about this type
  8 | interface ResultType {
  9 |   /**
 10 |    * Levels of tasks.
 11 |    */
 12 |   levels: LevelType;
 13 |   /**
 14 |    * Links between tasks.
 15 |    */
 16 |   links: LinkType[];
 17 |   /**
 18 |    * Critical paths.
 19 |    */
 20 |   criticalPaths: CriticalPath[];
 21 |   /**
 22 |    * Project Duration.
 23 |    */
 24 |   projectDuration: number;
 25 | }
 26 | 
 27 | // dont care about this type
 28 | interface ErrorType {
 29 |   /** Current error message, if any */
 30 |   error: string | null;
 31 | }
 32 | 
 33 | // dont care about this type
 34 | export interface InternalPertResultType extends ResultType {
 35 |   tasks: InternalTaskResultType;
 36 | }
 37 | 
 38 | // dont care about this type
 39 | export interface InternalPertContextType extends ErrorType {
 40 |   /** Current PERT calculation results */
 41 |   pertData: InternalPertResultType;
 42 |   /**
 43 |    * Calculates PERT results based on input tasks
 44 |    * @param data - Array of tasks to process
 45 |    * @example
 46 |    * calculatePertResults([
 47 |    *   { key: "1", duration: 5, text: "A", dependsOn: ["8", "10", "11"] },
 48 |    *   { key: "2", duration: 4, text: "B", dependsOn: ["10", "11"] },
 49 |    *   ...
 50 |    * ]);
 51 |    */
 52 |   calculatePertResults: (data: TaskInput[]) => void;
 53 | }
 54 | 
 55 | export interface PertDataType extends ResultType, ErrorType {
 56 |   /**
 57 |    * Task with metrics.
 58 |    */
 59 |   tasks: Task[];
 60 | }
 61 | 
 62 | export type FontSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | (string & {}) | number;
 63 | 
 64 | interface EventOption {
 65 |   /**
 66 |    * Invokes on task select.
 67 |    */
 68 |   onSelect?: (task: Task) => void;
 69 | }
 70 | 
 71 | export interface PertStyles {
 72 |   /**
 73 |    * Whether to disable grid lines in the chart.
 74 |    * @default false
 75 |    */
 76 |   disableGrid?: boolean;
 77 | 
 78 |   /**
 79 |    * Size of the task node in pixels.
 80 |    * @default 100
 81 |    * @min 70
 82 |    * @max 200
 83 |    */
 84 |   taskSize?: number;
 85 | 
 86 |   /**
 87 |    * Font family for the text in the task nodes.
 88 |    * @default "inherit"
 89 |    * @example
 90 |    * "Arial" | "Roboto" | "sans-serif"
 91 |    */
 92 |   fontFamily?: string;
 93 | 
 94 |   /**
 95 |    * Font size for the text in the task nodes.
 96 |    * @default "md"
 97 |    * @example
 98 |    * "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | 24 | "1.5rem"
 99 |    */
100 |   fontSize?: FontSize;
101 | 
102 |   /**
103 |    * Color of the text inside the task nodes.
104 |    * @default "#000"
105 |    */
106 |   textColor?: string;
107 | 
108 |   /**
109 |    * Background color of the entire chart.
110 |    * @default "#fff"
111 |    */
112 |   chartBackground?: string;
113 | 
114 |   /**
115 |    * Background color of the task nodes.
116 |    * @default "#aaaeff"
117 |    */
118 |   taskBackground?: string;
119 | 
120 |   /**
121 |    * Color of the grid lines in the chart.
122 |    * @default "#83838350"
123 |    */
124 |   gridColor?: string;
125 | 
126 |   /**
127 |    * Width of the border for task nodes.
128 |    * @default 1
129 |    */
130 |   borderWidth?: number;
131 | 
132 |   /**
133 |    * Width of the border for selected task nodes.
134 |    * @default 3
135 |    */
136 |   selectedBorderWidth?: number;
137 | 
138 |   /**
139 |    * Width of the border when hovering over task nodes.
140 |    * @default 2
141 |    */
142 |   hoverBorderWidth?: number;
143 | 
144 |   /**
145 |    * Color of the border for task nodes.
146 |    * @default "#615f77"
147 |    */
148 |   borderColor?: string;
149 | 
150 |   /**
151 |    * Color of the border for selected task nodes.
152 |    * @default "#6868ff"
153 |    */
154 |   selectedBorderColor?: string;
155 | 
156 |   /**
157 |    * Color for critical path elements (e.g., tasks or links).
158 |    * @default "#ff9147"
159 |    */
160 |   criticalColor?: string;
161 | 
162 |   /**
163 |    * Color of the arrows (links) between task nodes.
164 |    * @default "#615f77"
165 |    */
166 |   arrowColor?: string;
167 | 
168 |   /**
169 |    * Width of the arrows (links) between task nodes.
170 |    * @default 2
171 |    */
172 |   arrowWidth?: number;
173 | 
174 |   /**
175 |    * Gap between task nodes in the chart.
176 |    * @default { x: TaskSize ?? 100, y: TaskSize ?? 100 }
177 |    */
178 |   gap?: { x?: number; y?: number };
179 | }
180 | 
181 | export interface PertProps extends EventOption {
182 |   tasks: TaskInput[];
183 |   styles?: PertStyles;
184 | }
185 | 


--------------------------------------------------------------------------------
/lib/types/task.types.ts:
--------------------------------------------------------------------------------
 1 | export interface TaskDimensions {
 2 |   radius: number;
 3 |   halfRadius: number;
 4 |   twoThirdsRadius: number;
 5 | }
 6 | export interface ChartDimensions {
 7 |   width: number;
 8 |   height: number;
 9 | }
10 | 


--------------------------------------------------------------------------------
/lib/utlis/Pert.ts:
--------------------------------------------------------------------------------
  1 | import { generateKey } from "./generateKey";
  2 | import {
  3 |   TaskInput,
  4 |   Task,
  5 |   LevelType,
  6 |   LinkType,
  7 |   CriticalPath,
  8 | } from "../types/global.types";
  9 | 
 10 | class Pert {
 11 |   private levels: LevelType;
 12 |   private tasksMap: Map<string, Task>;
 13 |   private initialData: TaskInput[];
 14 |   private links: LinkType[];
 15 |   private criticalPaths: CriticalPath[];
 16 |   private lastTaskKey: string;
 17 |   private startTaskKey: string;
 18 |   private projectDuration: number;
 19 | 
 20 |   constructor(data: TaskInput[]) {
 21 |     this.initialData = data;
 22 |     this.tasksMap = new Map<string, Task>();
 23 |     this.lastTaskKey = `Finish-${generateKey()}`;
 24 |     this.startTaskKey = `Start-${generateKey()}`;
 25 |     this.links = [];
 26 |     this.criticalPaths = [];
 27 |     this.levels = new Map<number, string[]>();
 28 |     this.projectDuration = 0;
 29 |   }
 30 | 
 31 |   private convertDataToMap() {
 32 |     this.tasksMap = new Map<string, Task>();
 33 |     this.tasksMap.set(this.startTaskKey, {
 34 |       key: this.startTaskKey,
 35 |       duration: 0,
 36 |       text: "Start",
 37 |     } as Task);
 38 |     this.initialData.forEach((task, index) => {
 39 |       if (this.tasksMap.has(task.key)) throw Error(`Duplicate keys found ${task.key}`);
 40 |       this.tasksMap.set(
 41 |         task.key,
 42 |         (!task.dependsOn || task.dependsOn.length === 0
 43 |           ? { ...task, dependsOn: [this.startTaskKey], index }
 44 |           : { ...task, index }) as Task
 45 |       );
 46 |     });
 47 |   }
 48 | 
 49 |   private calculatePERT() {
 50 |     this.convertDataToMap();
 51 |     this.calcLevels();
 52 | 
 53 |     this.levels.forEach((indices) => {
 54 |       indices.forEach((index) => {
 55 |         this.calculateEarlyTimes(index);
 56 |       });
 57 |     });
 58 | 
 59 |     let lastTask = Array.from(this.tasksMap.values()).reduce((prev, current) =>
 60 |       prev.earlyFinish > current.earlyFinish ? prev : current
 61 |     );
 62 |     lastTask.lateFinish = lastTask.earlyFinish;
 63 |     lastTask.critical = true;
 64 | 
 65 |     this.tasksMap.set(this.lastTaskKey, {
 66 |       key: this.lastTaskKey,
 67 |       text: "Finish",
 68 |       dependsOn: [lastTask.key],
 69 |       duration: 0,
 70 |       earlyStart: lastTask.earlyFinish,
 71 |       earlyFinish: lastTask.earlyFinish,
 72 |       lateFinish: lastTask.earlyFinish,
 73 |       lateStart: lastTask.earlyFinish,
 74 |       level: this.levels.size,
 75 |       critical: true,
 76 |       freeFloat: 0,
 77 |       totalFloat: 0,
 78 |       index: this.tasksMap.size - 1,
 79 |     });
 80 |     this.levels.set(this.levels.size, [this.lastTaskKey]);
 81 | 
 82 |     this.projectDuration = lastTask.lateFinish;
 83 | 
 84 |     for (const [, indices] of [...this.levels.entries()].reverse()) {
 85 |       indices.forEach((index) => {
 86 |         this.calculateLateTimes(index, lastTask.lateFinish);
 87 |       });
 88 |     }
 89 | 
 90 |     this.levels.forEach((indices, key) => {
 91 |       this.levels.set(
 92 |         key,
 93 |         indices.sort((a, b) => this.tasksMap.get(a)!.index - this.tasksMap.get(b)!.index)
 94 |       );
 95 |     });
 96 |   }
 97 | 
 98 |   private getSuccessors(task: Task): Task[] {
 99 |     return Array.from(this.tasksMap.values()).filter(
100 |       (t) => t.dependsOn && t.dependsOn.includes(task.key)
101 |     );
102 |   }
103 | 
104 |   private calculateEarlyTimes(k: string) {
105 |     const task = this.tasksMap.get(k)!;
106 |     if (!task.dependsOn) {
107 |       task.earlyStart = 0;
108 |     } else {
109 |       let maxFinishTime = 0;
110 |       task.dependsOn.forEach((dependency) => {
111 |         const dependencyTask = this.tasksMap.get(dependency)!;
112 | 
113 |         maxFinishTime = Math.max(
114 |           maxFinishTime,
115 |           dependencyTask.earlyStart + dependencyTask.duration
116 |         );
117 |       });
118 |       task.earlyStart = maxFinishTime;
119 |     }
120 |     task.earlyFinish = task.earlyStart + task.duration;
121 |   }
122 | 
123 |   private calculateLateTimes(k: string, projectDuration: number) {
124 |     const task = this.tasksMap.get(k)!;
125 |     const successors = this.getSuccessors(task);
126 |     if (task.key !== this.lastTaskKey && successors.length === 0)
127 |       this.tasksMap.get(this.lastTaskKey)!.dependsOn?.push(k);
128 | 
129 |     let lateFinish =
130 |       successors.length === 0
131 |         ? projectDuration
132 |         : Math.min(...successors.map((s) => s.lateFinish - s.duration));
133 | 
134 |     task.lateFinish = lateFinish;
135 |     task.lateStart = task.lateFinish - task.duration;
136 |     task.critical = task.earlyFinish === task.lateFinish;
137 | 
138 |     if (!task.critical) {
139 |       task.freeFloat =
140 |         (successors.length === 0
141 |           ? projectDuration
142 |           : Math.min(...successors.map((s) => s.earlyStart))) - task.earlyFinish;
143 |       task.totalFloat = task.lateFinish - task.earlyFinish;
144 |     } else {
145 |       task.freeFloat = 0;
146 |       task.totalFloat = 0;
147 |     }
148 |   }
149 | 
150 |   private calcLevels() {
151 |     this.levels.clear();
152 | 
153 |     let arr: string[] = []; // To detect circular dependencies
154 | 
155 |     const calcLevel = (task: Task) => {
156 |       if (arr.includes(task.key)) {
157 |         throw new Error("Circular dependency detected");
158 |       }
159 |       if (!task.dependsOn || task.dependsOn.length === 0) {
160 |         task.level = 0;
161 |       } else {
162 |         let maxLevel = 0;
163 |         task.dependsOn.forEach((dependency) => {
164 |           const dependencyTask = this.tasksMap.get(dependency)!;
165 |           if (!dependencyTask) {
166 |             throw new Error(`Task with KEY '${dependency}' was not found.`);
167 |           }
168 |           if (dependencyTask.level === undefined) {
169 |             arr.push(task.key);
170 |             calcLevel(dependencyTask);
171 |           }
172 |           maxLevel = Math.max(maxLevel, dependencyTask.level + 1);
173 |         });
174 |         task.level = maxLevel;
175 |       }
176 | 
177 |       if (!this.levels.has(task.level)) {
178 |         this.levels.set(task.level, []);
179 |       }
180 | 
181 |       const levelArray = this.levels.get(task.level)!;
182 | 
183 |       if (!levelArray.includes(task.key)) {
184 |         levelArray.push(task.key);
185 |       }
186 |     };
187 | 
188 |     this.tasksMap.forEach((task) => {
189 |       if (task.level === undefined) {
190 |         arr = [];
191 |         calcLevel(task);
192 |       }
193 |     });
194 |   }
195 | 
196 |   private calcNodeLinks() {
197 |     const linkData: LinkType[] = [];
198 |     const dependencies: string[] = [];
199 | 
200 |     this.tasksMap.forEach((task, key) => {
201 |       if (task.dependsOn) {
202 |         task.dependsOn.forEach((dependency) => {
203 |           dependencies.push(dependency);
204 |           linkData.push({
205 |             from: dependency,
206 |             to: task.key,
207 |             critical: task.critical && this.tasksMap.get(dependency)!.critical,
208 |           });
209 |         });
210 |       } else if (key !== this.startTaskKey) {
211 |         linkData.push({
212 |           from: this.startTaskKey,
213 |           to: task.key,
214 |           critical: task.critical,
215 |         });
216 |       }
217 |     });
218 | 
219 |     this.tasksMap.forEach((task) => {
220 |       if (!dependencies.includes(task.key) && task.key !== this.lastTaskKey) {
221 |         linkData.push({
222 |           from: task.key,
223 |           to: this.lastTaskKey,
224 |           critical: task.critical,
225 |         });
226 |       }
227 |     });
228 | 
229 |     this.links = linkData;
230 |   }
231 | 
232 |   private calcCriticalPaths() {
233 |     this.calcNodeLinks();
234 | 
235 |     const criticalPaths: CriticalPath[] = [];
236 |     const startNodes = this.links.filter(
237 |       (link) =>
238 |         link.critical && link.from === this.startTaskKey && link.to !== this.lastTaskKey
239 |     );
240 | 
241 |     startNodes.forEach((startNode) => {
242 |       const path: LinkType[] = [startNode];
243 | 
244 |       const findPath = (node: LinkType) => {
245 |         const nodeLinks = this.links.filter(
246 |           (link) => link.critical && link.from === node.to && link.to !== this.lastTaskKey
247 |         );
248 |         if (nodeLinks.length === 0) {
249 |           criticalPaths.push(
250 |             path.map((p) => ({
251 |               text: this.tasksMap.get(p.to)!.text,
252 |               key: p.to,
253 |             }))
254 |           );
255 |         } else {
256 |           nodeLinks.forEach((nodeLink) => {
257 |             path.push(nodeLink);
258 |             findPath(nodeLink);
259 |             path.pop();
260 |           });
261 |         }
262 |       };
263 | 
264 |       findPath(startNode);
265 |     });
266 | 
267 |     this.criticalPaths = criticalPaths;
268 |   }
269 | 
270 |   getTasks(): Map<string, Task> {
271 |     this.calculatePERT();
272 |     return this.tasksMap;
273 |   }
274 | 
275 |   getCriticalPaths(): CriticalPath[] {
276 |     if (this.criticalPaths.length === 0) this.calcCriticalPaths();
277 |     return this.criticalPaths;
278 |   }
279 | 
280 |   getLevels(): Map<number, string[]> {
281 |     return this.levels;
282 |   }
283 | 
284 |   getNodeLinks(): LinkType[] {
285 |     return this.links;
286 |   }
287 | 
288 |   getProjectDuration(): number {
289 |     return this.projectDuration;
290 |   }
291 | 
292 |   solve() {
293 |     return {
294 |       tasks: this.getTasks(),
295 |       levels: this.getLevels(),
296 |       criticalPaths: this.getCriticalPaths(),
297 |       links: this.getNodeLinks(),
298 |       projectDuration: this.getProjectDuration(),
299 |     };
300 |   }
301 | }
302 | 
303 | export default Pert;
304 | 


--------------------------------------------------------------------------------
/lib/utlis/generateKey.ts:
--------------------------------------------------------------------------------
1 | export const generateKey = () => Math.random().toString(36).substring(7);
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-pert",
 3 |   "version": "0.0.0-development",
 4 |   "type": "module",
 5 |   "license": "MIT",
 6 |   "description": "Interactive PERT chart component for React",
 7 |   "files": [
 8 |     "dist",
 9 |     "README.md",
10 |     "LICENSE.md"
11 |   ],
12 |   "main": "./dist/index.umd.cjs",
13 |   "module": "./dist/index.js",
14 |   "exports": {
15 |     ".": {
16 |       "import": "./dist/index.js",
17 |       "require": "./dist/index.umd.cjs"
18 |     }
19 |   },
20 |   "types": "./dist/index.d.ts",
21 |   "sideEffects": false,
22 |   "publishConfig": {
23 |     "access": "public"
24 |   },
25 |   "homepage": "https://github.com/ucfx/react-pert#readme",
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "https://github.com/ucfx/react-pert"
29 |   },
30 |   "author": {
31 |     "name": "Youcef Hammadi",
32 |     "email": "ucefhammadi@gmail.com"
33 |   },
34 |   "scripts": {
35 |     "dev": "vite",
36 |     "prebuild": "rimraf dist",
37 |     "build": "tsc -b && vite build",
38 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
39 |     "semantic-release": "semantic-release"
40 |   },
41 |   "peerDependencies": {
42 |     "react": "*",
43 |     "react-dom": "*"
44 |   },
45 |   "devDependencies": {
46 |     "@eslint/js": "^9.19.0",
47 |     "@radix-ui/react-label": "^2.1.2",
48 |     "@radix-ui/react-popover": "^1.1.6",
49 |     "@radix-ui/react-scroll-area": "^1.2.3",
50 |     "@radix-ui/react-select": "^2.1.6",
51 |     "@radix-ui/react-separator": "^1.1.2",
52 |     "@radix-ui/react-slider": "^1.2.3",
53 |     "@radix-ui/react-slot": "^1.1.2",
54 |     "@radix-ui/react-switch": "^1.1.3",
55 |     "@radix-ui/react-tabs": "^1.1.3",
56 |     "@types/node": "^22.13.1",
57 |     "@types/react": "^18.3.18",
58 |     "@types/react-dom": "^18.3.5",
59 |     "@vitejs/plugin-react": "^4.3.4",
60 |     "autoprefixer": "^10.4.20",
61 |     "class-variance-authority": "^0.7.1",
62 |     "clsx": "^2.1.1",
63 |     "eslint": "^9.19.0",
64 |     "eslint-plugin-react-hooks": "^5.1.0",
65 |     "eslint-plugin-react-refresh": "^0.4.18",
66 |     "globals": "^15.14.0",
67 |     "lucide-react": "^0.475.0",
68 |     "postcss": "^8.5.1",
69 |     "react-colorful": "^5.6.1",
70 |     "rimraf": "^6.0.1",
71 |     "semantic-release": "^24.2.1",
72 |     "tailwind-merge": "^3.0.1",
73 |     "tailwindcss": "3",
74 |     "tailwindcss-animate": "^1.0.7",
75 |     "typescript": "^5.7.3",
76 |     "typescript-eslint": "^8.23.0",
77 |     "vaul": "^1.1.2",
78 |     "vite": "^6.1.0",
79 |     "vite-plugin-dts": "^4.5.0",
80 |     "vite-plugin-lib-inject-css": "^2.2.1",
81 |     "vite-tsconfig-paths": "^5.1.4",
82 |     "react": "^18.3.1",
83 |     "react-dom": "^18.3.1"
84 |   },
85 |   "keywords": [
86 |     "react",
87 |     "pert",
88 |     "pert chart",
89 |     "react-pert",
90 |     "react pert",
91 |     "graph",
92 |     "diagram",
93 |     "chart"
94 |   ]
95 | }
96 | 


--------------------------------------------------------------------------------
/postcss.config.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ucfx/react-pert/3816c8b4c161d5317a2ac82bef6c65a7885a113a/public/cover.jpg


--------------------------------------------------------------------------------
/public/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ucfx/react-pert/3816c8b4c161d5317a2ac82bef6c65a7885a113a/public/demo.jpg


--------------------------------------------------------------------------------
/public/pert.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11.29mm" height="11.29mm" viewBox="0 0 32 32"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:url(#New_Gradient_Swatch);}.cls-3{mix-blend-mode:overlay;opacity:0.5;}.cls-4{fill:#fff;}</style><linearGradient id="New_Gradient_Swatch" x1="24" y1="2.14" x2="8" y2="29.86" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#323240"/><stop offset="0.11" stop-color="#2d2b3c"/><stop offset="0.68" stop-color="#130d2b"/><stop offset="1" stop-color="#0a0125"/></linearGradient></defs><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_13" data-name="Layer 13"><rect class="cls-2" width="32" height="32" rx="16"/><image class="cls-3" width="122" height="84" transform="translate(2.4 6.9) scale(0.24)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAABUCAYAAABN/yOiAAAACXBIWXMAAC4jAAAuIwF4pT92AAAR7ElEQVR4Xu2daXPbSpJFLyXKcr+l//+/nJ55iyVzwXwgruvgIgsAJdJhvXZGVBSINStPZlaiSNm7YRj0U/758rB2wk/5Z8h+7YRbyn7/tFs75x5yPB6uSlvfQ89rdXqv7O6VuheMdXcjQt4zuHvq2dXrXg5wU9ABt7e9tO9WUg2K+7ideqx9fo9co9dNob8bdAcu+2rf95IBPbcr+Z66pi5r/buhvws0IKeRdroUertoKvp7SALOxnNS76rdSiqQS02x/WbgbwJdAGZ7UIOc2xVwyi2MSgOd0Z9jH+Wt+q5JPqcHeEnPGfy3wL4adAHZBnlUM9QjPnN/L1KWjHitgdN4p3H7hO0zzifgNZ2XZMmQPcCEe+psE/6bgW8G3YniBPuoyyvbHtuEnsazrEX32rmWNOBJ0hG9t0/jOdajp/sSbBqut83PCTuhUtfc7kHfDHsT6E4Uu+3RnqLRcG5VVFcgq34NeAX5UDSDlpqjWudParrTSZeep419OiL1zHaIzwn92722wL5mwaSKYsL9JOl57N0IvEqH6vRrrbqORrRRDpK+SnpFM+yz2nioP8eQelMSXK+p2GZ0GqLBflXTm/1BF31P432+TT/7/dNqZK+CHqOZkJnmbJBnSZ+jt8ESdAITtvmc7HvzPO/DaCbkL5Jext6wbTA76+ex/UttDJ80zUSWjMozPrPvwfZxpmlDdrNj7sfPj2rQLYY97PdPuyXYi6AjZTOSGQE00C/4nKAJSpoazp8JNwuj7HmuhaBtrBdJf0n6Wxd9vozHjnjOsy76/6rLGDwO68/nJOBT0VewEzh1NeyEbOd8UT9InJneF9GaR7Mj2cb5pWgEXUGW5opl5LKYWyvwEoKN9qILYOqyH/czoj/rAvm3sf2qy9ieNQVNyFWR5z4jnZAtmRUY1Ybcy4jVvRZTeBd0kbIf1NLcJzXINsxvaqAZzb20RwNIU2ci3CzwqiKPBjirpe0vukC0HhyHU+CTLmP5TdLvkv6tNpbPeI7vvVTkPaoBq0BbetMAp5y0YULOdpb6KXxrRGc0O1Ub8O/jtiOhSnk5cG9b7FQ0TDpYVezR26UWHa9qoHjfYTyXoO2wv6vBJuiH8TqC8PO8n58ZqZVD5zRlOWteyFaQq4wxaCGFl6A70ey52fPyL5qmu9/UChlGgQ3BdMf0ZvGzHK3cd8Zn1gg0ijPHoAba92FqPI7nWD9nJ2eoX9GecQ9HssdDB7YD2Akyqi20KbORdWcmc7P9pWnkn4u2Uyeq1yK6l7YZ0W6OABtdmr7msHEusycS9BPO4zk+buPZMPZ+G+SkqQ4HTV+xCCqLShaTz2rRLDXQTt1ZML2qVcY90MyOVUsnyEhmXcDAsZ5lVC+BZlTToDYKCzFHsl9HMs3ZwK4qqWAPtB3K5xM49fkU1/q4xvtzvnM7qBljqQawoRm1rORdzf897nvRMujMjpmZpJYNaX9DXqoN6LwzmYFG2pbmHmiF+L5p73dEGbKr3vT4V01Tmw1uQEzNvr+dxNdY6P17tfmXOj9Fb0PaGR6jMYqs30Gtgv9T0h9j71aBpiPTmRnNmU3O42efRz0ycJ7Vpqej2hRXpu8tEc3UTdhcFLH3Sw3yFzVvd+PqFFO3NHUqg7YR7CRM+5kJGAW8X9UM1Y7B66SWnm3gV130/0PS/43tDzXgBs3UzfH1QNuG6cQ5LmZSF5kvas7rcWUW+CZroNMwVRHkCJEuiqb3/6mW4tLje6Bzmlgyoq8lKHt3Hs/GYwbiFOnjB12c1pD/d2yG/aemGauqQSwZNAbtMaW+T2PPaWrprYM2mMgSaGnuWVYw06DUDOQlx780TXM2BufoCgadyrAJOuf3vH5QG1dVDCVkaQ75gGtfddHfkP8zNoP+W21snjMr/aT5tOLotC2kqQ3sFN5n21fTUJWZvkkPNC/IqM4H+DwbiWnbsB3ROdcSgtSU5XNYxGW0WKjvoIu3P6j/HAohex70/Y66jOVPNcj/oxbRTNupn+9JcdAYIIs2aZqqM1Iz2Mgh07Yd/ptMQBe/3GREV/Mcjcuq1FH9d/TV/FylVzqWjcFIrlK+m8bjj2rwDNvXsDcQRrOPfdXFST0v/0fT1P2XllN2RrTH9xjnSg2+axOnZwYU7cJILqOZBVkV0Tv02WhQ3tgGtaFycb56tcr5S6phn6L1INMggy5RIU3nvzQ891F/P+dVF5ien9ln3bEG2fIwnveI4w+66Etb2XG4PlAFXBXNUkT12hxtqaD7hr6ZYdNgVZ/ptPL4Hc7JlpA5d+3VjOLFjt6czp6OasM5bft9mYUlIfeyVAXaxicM6+j5fSl78Zoe4FKW5uhrxQNbAsRzKkOkEXpG88CyQCHsQS1907kSNnU+qomr7XxFXFsFS0dKGXTRr2ennGoqO63JJJqlPuhrb7xFtipt2AaQUkXyM5rntd14bNA8OrLZwKfxGYNaGq0WfKrCcAvkLfKWIEuZPX9r6q6Mk9CYUqo5JFMNgfIeKQaxUyv4HtQgO71ynfpJLZqdhqtodk/Y3matwdaDS+nB4vhZW7DG4D7azE6/xqGUCjQBVC3TsTRXPF/BOABf5/RaGYX7OP8QyFGt4HtB+6K2JCtN5+le6ua4Btw/58xMqdIU3JLBOSXZUd2eouWrkyXt38tQUugyAX08HobiFYuG4GBzwAnZKzlWngUL75uSz88o8HHrYBCGzuizTr15L5szAMdYVex07EHTzMQxVQ67U3P+nHY4/TgrVWNODslCkrR1rZuD5wOyKuTgDZrLdFzLpVOcVRsle2+nkdIArPipo4+XxhglQSbUfPZe7d7OUr6OUo2BAeEvbvgtIL8J5FsEx+hxsvZYDKC1YoywK0P6YY/j+Zw7+cXHVzWn2KlBT9Bu6vQ0VG+dNx3UEToUTZrqIE314NzJJVmOY8mBpKn+nN5so/zBQwWagVa9hq3psDmiDdkP4ZLkQdO5xLAJ+qBmdKZSy67ThN7bjAjfP6FbKrgJuRd1nIL85Yod9GHcT9BLwvsyGHxf/lqn+gHHWa1mYMvaoavLNaDtQQbtVw2v3PhehmmP9aK9sJ8pX2oR2YOt2JfOlFFQRXmm74xyP8PXDWr6cxp4HPfbeW8BOn/E4XHs1GxfrTT2ll1nMgM9FmTS5SG+mB7lKpffRdsw7DkHZRQwjdMI7A2pB5vG8txGnap0XgGnYfL5PGenBpmvWXmPNDTHkVOB7cPmDOWUTch+szDsCrSk+Z/pXBvRTtkvqosFpxqCfR73PY7bmbYJOCNb6C00GJ3JsFmxEhanIDcbI6cRZoQd9j1pvhpWRVEPNiOatYwzk6egnaaQ/dro1vtef3tEhyRoR7QV5Zx4VvNEqUXdZ7VI6M3ND8W20FNoeBvfKTAjWrqMIQFXoG0sOt0jtu1UvSiy9KKb46Oj5ntzQs5l2K0/cphICRrpW5rC9vxsI3M+O2uadgzakV15/26hVUIHSGOtQa6KGZ/DAjFhZ/bIAsj3oAzoe+OlIzH7ZCTnL3Uyop1Zvtn3rT/gP+uiBNN3plmmx7OmRZFTUcLj56UIrqSKas7L1mXQtIBcAp2vK4RsMHtNHSJBVoCr8zhe6mvIB7V0/Zem35j5e/1cju1Gs7QO2hc7oj3gXbGdnrqP3oajDEWf+3LbRqKz+ZxBFz193qA23VRr1lJzZM6bhitNn+fPPT39mS2dgtfyGAPJhZfTdQW6jGZ1pAs6lkOtsJUxUHo90+igFnFeaOB8TiOw8VjPkBZH3WOx/xHbR/VfS3zOw7h/P/Yet49JNagKMrcT9rnYtl2dZbL44ty8Gs1X/5GdtDhXM3JtIBZbA44btFM47yNsu6WHpvEYaTmHOntURU2mbj+futIZz/HZ5/Yih/B7jnyK7awf+K5M2Hyt6r4/v/nvoyFU/qTL4HtwCGCPxsjwQGl8K17BFnppOk0QtB3KgKxv9QyDltr8fIjrqqlhDXYP9Al9BdmgmbqrTMSUvaTLRFZBI4XnAPIhvTmaxsoI663yTDx1vLYHmtHsd2guHw5qEZz3tWNaL4L2FCVNgVXGze2E3AN9REvYbJWjksP7/2mLkOpmlcEzhUoXpTgHOTUl7GtAs+rmwoOBMw2nQ1ovaQrnqAba+wxlS7ahI6yBrmAT+gHHutluDbJ0PWgaKeE+RWO6tpKvWi4wCHrisSE5PRiwl1stT5rrbL1tKO9j/eBjmVqZNqlb1fNeBF1BPxZ9TjNlRtkCWboetDSFzLnxE1ouQZ50Aen3Qv6oPyvJJUNKc0d70gXAeTxO5zPI3fi5uq8zg4F7/2m8b69inxkd12Y7L7RT0RMs28QeWyFL14HOiGDKfI7e0exBJmT/LtorPb3lvDSiNAXtaD7jsyHQGXwN7+fPBm2dHzSFYNhLa8zSVM8Ktm1B8OkE1edsVwG2rIKOf/0gUzZB85sXgnbxRdD8c9MvmhuPgxR6z6sG4nf2BzUnMTyDd/pmveB7EXQWjjvNYeffgPX05PYa9KVjvF7S2yBLG0BDcl4kZEdyVQQd1Aqvtb/H4twsTQ1nscO5qq4gM0oNmvccsC8j2s/kvM25ulqw8H0tuV1Bq7b5mf2bAVsWQV8RzflLj4xmgmYR5gjJ14bZQCHWQ2pp1ucRMudqnyfNHSkjOkHzmizOqG+lawV/6753w6VsjeiMZs+N2fj+elYD7TkuAWdxk6mwEqbWNDL1pEPSIU5q42ZEG7TG83yfhG3gLJpS3zXo3X23hEvZAjqj2UXYk+potmFybmNbXMrTujASHJVsj9Eeiv2GXEW0P/OefJ4bnbOSxbHcC2olXdAr/wRV9TrlyNlpXsT0XlHK4qu7MD/9zTmj2GJdqbObin3nYh8dhxFtSdiLzvk9YS7JWyK6em/OL/xdhPWWOstIfqdR0jHTSYfYny3Pq86lTHR9p+53lwctyxpkvjcz9bloScjVO+hiRGyUhOB9FSj2uS+lt//DSRnRG6ptws7lTqbtXJzn0t5kfrthRCwBXAPXc4I1h/jhZUtEG3IV0bmu7QIl0zZTdm9R5B6S91571trxDytLoBnND9oWzZm22boV9g2jWZo7T04P7HNfdT7llnp+V5mBLtL2TvOIZiT7NcSQe9FcpuwbSRW5zi5L/TXtQ8tS1c1o5ioTmyFL/bm5qrJvVWlL8wg9RzvpMoZTcew8XrvD9j8Sdg80iw++Y1aLEFIDZ8hVpf2WhZGtUkHO1auzpsVgrmrtsF2tfH1o6BPQxf8zmaD5fik143oJMxdHqi8AbpG2M4oJ2TWCM4nHcMI+O96gVkQK23SGyiks7x3Hd5MqovNVgsDpCEzVO12Mc80y5y3StjSF7Ih1ZtmrwcxphaC9JOqahc7QXcH7SLIldVsYPYwaD/qo+uepFej3yKCWZhnNrPZfdXkrMGDPwQbt1zyCPqqBPmqejQhbmmaVH162LIFKU4MyYlyRD+M+/3VB9TuwSUS8JZqLPypIyKwRrJe/aKHuFWjXHRqP5bJtNV9Luvnr4V1kDXQvil/VosXzWoL2z26c/m6Z9hhNTNuG7HGdNAfNdCxNXx8J+qv6WSmj+oeXHugqLXqOM2RGy4Bj/GWnDXSrIoySkB3NL5qmao+RkW9gUqs/8lXR41mK6g8jFehB0znQBjpo6vVHNeMwojw/0zgTA90o1VWp+6vmUfk4frZTUB9p/mbhc5kh8s3hY4OOv8qQphHDqtspkUZkVLGyvVURRqEz0hEzInN51udSH4Lm9b5nFnC89pZjuqsszdH22pPa65P3O5oZAZzD2bvouUk0F38i5Gfnu31mIKZ6RuQuGs89RptF9HvH871kC2gbUpoaIBdOTmhZuNwj1VG/dMST5qt3Q9GkOWQL0zzbvcZzVyn/o/DOz4hcsDDNZQRwHkzI745mysJ35tQ3dXSfeiRoOlG2u4zn3rIW0dJlcP48aJ7qaMBz9Pc2Cu95Rm/wUg2wkoxo6j8bjz6YlBEtTda9Eyz3WzJaJga5E+TU0X3qWUnq0zu3gnvXMd1LuqClriEtVQTM+nsbpPgihv0tJMd19zHdQxZBWzr/e04lk5t9T4Ns1HFJn57jfpPvOZ5byybQlsKYM/kRjLFFz63yI4znFnIV6J/yceVBP+W/Qn6C/i+R/wfyjTe4BZS4wwAAAABJRU5ErkJggg=="/><path class="cls-4" d="M15.14,17.63a.63.63,0,0,0-.58.64v4.66H15a.55.55,0,0,0,.55-.56V17.59ZM4.49,22.93h.67a.64.64,0,0,0,.6-.42L7,19.24a10.07,10.07,0,0,1,.44-1A3.81,3.81,0,0,1,8,17.43a2.46,2.46,0,0,1,.74-.55,2.26,2.26,0,0,1,1-.2h4.55c.28,0,.56,0,.82-.06a.53.53,0,0,0,.45-.52V9.6A.52.52,0,0,0,15,9.07H9.36a9.4,9.4,0,0,0-1.69.16,4.37,4.37,0,0,0-1.44.56,2.94,2.94,0,0,0-1,1.13,3.88,3.88,0,0,0-.37,1.82A4.49,4.49,0,0,0,5,14a3.36,3.36,0,0,0,.51,1.08,3,3,0,0,0,.58.59.68.68,0,0,0,.81,0c.12-.1.25-.19.38-.28l.14-.08A2.52,2.52,0,0,1,6.82,15a2,2,0,0,1-.7-.9,3.67,3.67,0,0,1-.23-1.37,2.27,2.27,0,0,1,.91-2,4.74,4.74,0,0,1,2.68-.61h0a5.09,5.09,0,0,1,5.08,5.1v.47H11.09a5.87,5.87,0,0,0-3.25.64,4.41,4.41,0,0,0-1.69,2.27c-.07.18-.15.37-.23.59Z"/><path class="cls-4" d="M27.08,11A3.28,3.28,0,0,0,26,9.84a4.64,4.64,0,0,0-1.64-.6,11.11,11.11,0,0,0-1.94-.17H17.88a.53.53,0,0,0-.53.53V16a.62.62,0,0,0,.53.61,13.49,13.49,0,0,0,1.59.07h3a5.77,5.77,0,0,0,3.74-1.06,3.81,3.81,0,0,0,1.28-3.1A2.5,2.5,0,0,0,27.08,11Zm-.85,2.91a2.29,2.29,0,0,1-.68,1,3.16,3.16,0,0,1-1.22.59,6.64,6.64,0,0,1-1.8.21H18.36V13.85a3.83,3.83,0,0,1,4.12-3.76h0a10.44,10.44,0,0,1,1.51.1,3.58,3.58,0,0,1,1.27.41,2.37,2.37,0,0,1,.87.88,1.72,1.72,0,0,1,.32,1.12A3.64,3.64,0,0,1,26.23,13.93Zm-8.33,9h.46V18.1a.44.44,0,0,0-.41-.45l-.6-.07v4.79A.56.56,0,0,0,17.9,22.93Z"/></g></g></g></svg>


--------------------------------------------------------------------------------
/release.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   branches: ["main", { name: "beta", prerelease: true }],
3 | };
4 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import { useCallback, useState } from "react";
  2 | import { ChevronRight, ChevronLeft } from "lucide-react";
  3 | import { cn } from "@/lib/utils";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Sidebar } from "@/components/Sidebar";
  6 | import { PertChart } from "./components/PertChart";
  7 | import { ScrollArea, ScrollBar } from "./components/ui/scroll-area";
  8 | import { ModeToggle } from "./components/mode-toggle";
  9 | import { TasksDrawer } from "./components/TasksDrawer";
 10 | import { PertStyles, Task, TaskInput } from "@@/lib/main";
 11 | import { initialStyles, initTasks } from "./constants/initStates";
 12 | import "./index.css";
 13 | 
 14 | function App() {
 15 |   const [styles, setStyles] = useState(initialStyles);
 16 |   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 17 |   const [tasks, setTasks] = useState(initTasks);
 18 |   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
 19 | 
 20 |   const handleSetStyles = useCallback((key: keyof PertStyles, value: any) => {
 21 |     setStyles((prev) => ({ ...prev, [key]: value }));
 22 |   }, []);
 23 | 
 24 |   const handleSetTasks = useCallback((newTasks: TaskInput[]) => {
 25 |     setTasks(newTasks);
 26 |   }, []);
 27 | 
 28 |   const handleSelect = useCallback((Task: Task) => {
 29 |     console.log("selected task", Task);
 30 |     setSelectedTask(Task);
 31 |   }, []);
 32 | 
 33 |   return (
 34 |     <div className="flex min-h-screen bg-background p-2">
 35 |       <div
 36 |         className={cn(
 37 |           "transition-all duration-300 ease-in-out relative",
 38 |           isSidebarOpen ? "w-80" : "w-0"
 39 |         )}
 40 |       >
 41 |         <div
 42 |           className={cn(
 43 |             "absolute top-0 left-0 h-full transition-transform duration-300 ease-in-out",
 44 |             isSidebarOpen ? "translate-x-0" : "-translate-x-full"
 45 |           )}
 46 |         >
 47 |           <Sidebar
 48 |             selectedTask={selectedTask}
 49 |             {...styles}
 50 |             onStyleChange={handleSetStyles}
 51 |           />
 52 |         </div>
 53 |         <Button
 54 |           variant="secondary"
 55 |           size="icon"
 56 |           className="absolute -right-4 top-12 z-50 rounded-full shadow-md"
 57 |           onClick={() => setIsSidebarOpen(!isSidebarOpen)}
 58 |         >
 59 |           {isSidebarOpen ? (
 60 |             <ChevronLeft className="h-4 w-4" />
 61 |           ) : (
 62 |             <ChevronRight className="h-4 w-4" />
 63 |           )}
 64 |         </Button>
 65 |       </div>
 66 |       <main
 67 |         className={cn(
 68 |           "px-5 transition-all duration-300 flex flex-col justify-between flex-1",
 69 |           isSidebarOpen ? "w-[calc(100%-20rem)]" : "w-full"
 70 |         )}
 71 |       >
 72 |         <div className="flex justify-between items-center">
 73 |           <div className="">
 74 |             <h1 className="text-2xl font-bold">PERT Chart</h1>
 75 |             <p className="text-muted-foreground">
 76 |               {isSidebarOpen
 77 |                 ? "Customize the appearance using the sidebar"
 78 |                 : "Click the arrow to show style options"}
 79 |             </p>
 80 |           </div>
 81 |           <div className="flex items-center space-x-4">
 82 |             <Button variant={"ghost"} size={"icon"} asChild>
 83 |               <a href="https://github.com/ucfx/react-pert" target="_blank">
 84 |                 <svg
 85 |                   role="img"
 86 |                   viewBox="0 0 24 24"
 87 |                   xmlns="http://www.w3.org/2000/svg"
 88 |                   className="fill-foreground"
 89 |                 >
 90 |                   <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
 91 |                 </svg>
 92 |               </a>
 93 |             </Button>
 94 |             <Button variant={"ghost"} size={"icon"} asChild>
 95 |               <a href="https://www.npmjs.com/package/react-pert" target="_blank">
 96 |                 <svg
 97 |                   role="img"
 98 |                   viewBox="0 0 24 24"
 99 |                   xmlns="http://www.w3.org/2000/svg"
100 |                   className="fill-foreground"
101 |                 >
102 |                   <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" />
103 |                 </svg>
104 |               </a>
105 |             </Button>
106 |             <TasksDrawer setTasks={handleSetTasks} />
107 |             <ModeToggle />
108 |           </div>
109 |         </div>
110 |         <div className="w-full max-h-[calc(100vh-6rem)] rounded-lg shadow-sm border flex-1">
111 |           <ScrollArea className="h-full whitespace-nowrap rounded-md">
112 |             <PertChart styles={styles} tasks={tasks} handleSelect={handleSelect} />
113 |             <ScrollBar orientation="horizontal" />
114 |           </ScrollArea>
115 |         </div>
116 |       </main>
117 |     </div>
118 |   );
119 | }
120 | 
121 | export default App;
122 | 


--------------------------------------------------------------------------------
/src/components/Color.tsx:
--------------------------------------------------------------------------------
 1 | import { HexAlphaColorPicker } from "react-colorful";
 2 | import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 3 | import { PertStyles } from "@@/lib/main";
 4 | import { memo } from "react";
 5 | import { Input } from "./ui/input";
 6 | 
 7 | interface ColorProps {
 8 |   color?: string;
 9 |   colorName: keyof PertStyles;
10 |   handleChange: (key: keyof PertStyles, value: any) => void;
11 | }
12 | 
13 | export const Color = memo(function Color({ color, colorName, handleChange }: ColorProps) {
14 |   return (
15 |     <Popover>
16 |       <PopoverTrigger>
17 |         <span
18 |           className="w-16 h-8 border rounded-md block transition-all"
19 |           style={{ background: color }}
20 |         />
21 |       </PopoverTrigger>
22 |       <PopoverContent className="w-fit">
23 |         <HexAlphaColorPicker
24 |           color={color}
25 |           onChange={(color) => handleChange(colorName, color)}
26 |         />
27 |         <Input
28 |           value={color?.toUpperCase()}
29 |           onChange={(e) => handleChange(colorName, e.target.value)}
30 |           className="mt-2 border rounded-md p-1"
31 |         />
32 |       </PopoverContent>
33 |     </Popover>
34 |   );
35 | });
36 | 


--------------------------------------------------------------------------------
/src/components/CopyDrawer.tsx:
--------------------------------------------------------------------------------
 1 | import { memo } from "react";
 2 | import {
 3 |   Drawer,
 4 |   DrawerContent,
 5 |   DrawerDescription,
 6 |   DrawerHeader,
 7 |   DrawerTitle,
 8 |   DrawerTrigger,
 9 | } from "@/components/ui/drawer";
10 | import { Button } from "@/components/ui/button";
11 | import { Textarea } from "@/components/ui/textarea";
12 | import { PertStyles } from "@@/lib/main";
13 | import { Check, Copy } from "lucide-react";
14 | 
15 | interface CopyDrawerProps {
16 |   styles: PertStyles;
17 | }
18 | 
19 | export const CopyDrawer = memo(({ styles }: CopyDrawerProps) => {
20 |   const jsonInput = JSON.stringify(styles, null, 2);
21 | 
22 |   const handleCopyStyles = async (e: React.MouseEvent<HTMLButtonElement>) => {
23 |     const button = e.currentTarget;
24 |     try {
25 |       const input = document.createElement("textarea");
26 |       input.value = JSON.stringify(styles, null, 2);
27 |       document.body.appendChild(input);
28 |       input.select();
29 |       input.setSelectionRange(0, 99999);
30 | 
31 |       if (navigator.clipboard) {
32 |         await navigator.clipboard.writeText(input.value);
33 |         button.classList.add("success");
34 |         setTimeout(() => {
35 |           button.classList.remove("success");
36 |         }, 2000);
37 |       }
38 | 
39 |       document.body.removeChild(input);
40 |     } catch (error) {
41 |       console.error("Copy failed", error);
42 |     }
43 |   };
44 |   return (
45 |     <div className="justify-self-end">
46 |       <Drawer>
47 |         <DrawerTrigger asChild>
48 |           <Button variant="outline">Copy Styles</Button>
49 |         </DrawerTrigger>
50 |         <DrawerContent className="w-full">
51 |           <div className="mx-auto w-full max-w-2xl">
52 |             <DrawerHeader>
53 |               <DrawerTitle>Copy Styles</DrawerTitle>
54 |               <DrawerDescription />
55 |             </DrawerHeader>
56 |             <div className="p-4 pt-0 relative">
57 |               <Button
58 |                 variant="link"
59 |                 onClick={handleCopyStyles}
60 |                 className="group absolute top-4 right-8"
61 |                 data-state=""
62 |                 size={"icon"}
63 |               >
64 |                 <Copy className="w-4 h-4 transition-opacity group-[.success]:hidden" />
65 |                 <Check className="w-4 h-4 hidden transition-opacity group-[.success]:block text-green-500" />
66 |               </Button>
67 |               <Textarea
68 |                 defaultValue={jsonInput}
69 |                 id="jsonInput"
70 |                 className="min-h-[300px] resize-none font-mono text-sm
71 |                 overflow-y-auto [&::-webkit-scrollbar]:w-1.5
72 |                 [&::-webkit-scrollbar-thumb]:rounded-full
73 |                 [&::-webkit-scrollbar-track]:bg-transparent 
74 |                 [&::-webkit-scrollbar-thumb]:bg-border"
75 |               />
76 |             </div>
77 |           </div>
78 |         </DrawerContent>
79 |       </Drawer>
80 |     </div>
81 |   );
82 | });
83 | 


--------------------------------------------------------------------------------
/src/components/PertChart.tsx:
--------------------------------------------------------------------------------
  1 | import { Pert, PertStyles, Task, TaskInput } from "@@/lib/main";
  2 | import { Info } from "lucide-react";
  3 | import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
  4 | 
  5 | interface PertChartProps {
  6 |   styles: PertStyles;
  7 |   tasks: TaskInput[];
  8 |   handleSelect: (task: Task) => void;
  9 | }
 10 | 
 11 | export function PertChart({ styles, tasks, handleSelect }: PertChartProps) {
 12 |   const raduis = 200;
 13 |   return (
 14 |     // <div className="h-full flex items-center justify-center realtive">
 15 |     <div className="overflow-hidden grid place-items-center realtive">
 16 |       <div className="absolute top-0 right-0 m-4">
 17 |         <Popover>
 18 |           <PopoverTrigger asChild>
 19 |             <Info
 20 |               size={24}
 21 |               className="cursor-pointer opacity-50 hover:opacity-100 transition-opacity"
 22 |             />
 23 |           </PopoverTrigger>
 24 |           <PopoverContent className="shadow-xl w-[350px]" side="left" align="start">
 25 |             <div className="p-0 flex flex-col items-center">
 26 |               <h2 className="text-lg font-bold mb-4">Task Node</h2>
 27 |               <svg
 28 |                 width={raduis}
 29 |                 height={raduis}
 30 |                 viewBox={`0 0 ${raduis} ${raduis}`}
 31 |                 xmlns="http://www.w3.org/2000/svg"
 32 |                 textAnchor="middle"
 33 |                 dominantBaseline="middle"
 34 |               >
 35 |                 <g>
 36 |                   <rect
 37 |                     rx="10"
 38 |                     ry="10"
 39 |                     width={raduis}
 40 |                     height={raduis}
 41 |                     // stroke="#615f77"
 42 |                     strokeWidth={5}
 43 |                     className="fill-transparent stroke-3 stroke-muted-foreground"
 44 |                   />
 45 |                   <text x={raduis / 2} y={raduis / 2} className="fill-foreground text-sm">
 46 |                     Task Name
 47 |                   </text>
 48 | 
 49 |                   <text x={raduis / 4} y={raduis / 6} className="fill-foreground text-sm">
 50 |                     Earliest Start
 51 |                   </text>
 52 |                   <text
 53 |                     x={(3 / 4) * raduis}
 54 |                     y={raduis / 6}
 55 |                     className="fill-foreground text-sm"
 56 |                   >
 57 |                     Latest Start
 58 |                   </text>
 59 |                   <text
 60 |                     x={raduis / 4}
 61 |                     y={(raduis * 5) / 6}
 62 |                     className="fill-foreground text-sm"
 63 |                   >
 64 |                     Earliest Finish
 65 |                   </text>
 66 |                   <text
 67 |                     x={(3 / 4) * raduis}
 68 |                     y={(raduis * 5) / 6}
 69 |                     className="fill-foreground text-sm"
 70 |                   >
 71 |                     Latest Finish
 72 |                   </text>
 73 | 
 74 |                   <path
 75 |                     d={`
 76 |                       M ${0} ${raduis / 3}
 77 |                       L ${raduis} ${raduis / 3}
 78 |                       M ${0} ${(raduis * 2) / 3}
 79 |                       L ${raduis} ${(raduis * 2) / 3}
 80 |                       M ${raduis / 2} ${(raduis * 2) / 3}
 81 |                       L ${raduis / 2} ${raduis}
 82 |                       M ${raduis / 2} ${0}
 83 |                       L ${raduis / 2} ${raduis / 3}
 84 |                     `}
 85 |                     className="stroke-muted-foreground stroke-2"
 86 |                   />
 87 |                 </g>
 88 |               </svg>
 89 | 
 90 |               {/* definition of each one earlist start, latest start, earlist finish, latest finish */}
 91 | 
 92 |               <ul className="mt-4 text-sm text-justify flex flex-col gap-2">
 93 |                 <li>
 94 |                   <strong>Earliest Start:</strong> The earliest time a task can start
 95 |                 </li>
 96 |                 <li>
 97 |                   <strong>Latest Start:</strong> The latest time a task can start without
 98 |                   delaying the project
 99 |                 </li>
100 |                 <li>
101 |                   <strong>Earliest Finish:</strong> The earliest time a task can finish
102 |                 </li>
103 |                 <li>
104 |                   <strong>Latest Finish:</strong> The latest time a task can finish
105 |                   without delaying the project
106 |                 </li>
107 |               </ul>
108 |             </div>
109 |           </PopoverContent>
110 |         </Popover>
111 |       </div>
112 |       <Pert tasks={tasks} styles={styles} onSelect={handleSelect} />
113 |     </div>
114 |   );
115 | }
116 | 


--------------------------------------------------------------------------------
/src/components/PertDetails.tsx:
--------------------------------------------------------------------------------
 1 | import { memo } from "react";
 2 | import { ScrollArea } from "@/components/ui/scroll-area";
 3 | import { usePert, setSelectedTask, Task } from "@@/lib/main";
 4 | import { Separator } from "@/components/ui/separator";
 5 | import { Input } from "./ui/input";
 6 | 
 7 | export const PertDetails = memo(({ selectedTask }: { selectedTask: Task | null }) => {
 8 |   const { projectDuration, criticalPaths } = usePert();
 9 | 
10 |   return (
11 |     <ScrollArea className="h-[calc(100vh-3.5rem)] px-4 pb-4">
12 |       <div>
13 |         <h2 className="text-xl font-bold">Project Duration</h2>
14 |         <p>{projectDuration} days</p>
15 |       </div>
16 |       <Separator className="my-3" />
17 |       <div>
18 |         <h2 className="text-xl font-bold">Critical Paths</h2>
19 |         <ul>
20 |           {criticalPaths.map((cp, index) => (
21 |             <li key={index}>
22 |               {cp.map((p, i) => (
23 |                 <span key={i}>
24 |                   {p.text}
25 |                   {i < cp.length - 1 && " → "}
26 |                 </span>
27 |               ))}
28 |             </li>
29 |           ))}
30 |         </ul>
31 |       </div>
32 |       <Separator className="my-3" />
33 |       <div>
34 |         <h2 className="text-xl font-bold mb-2">Select Task by Key</h2>
35 |         <Input
36 |           type="text"
37 |           placeholder="Enter task key"
38 |           onChange={(e) => setSelectedTask(e.target.value ?? null)}
39 |         />
40 |       </div>
41 |       <Separator className="my-3" />
42 |       <div>
43 |         <h2 className="text-xl font-bold">Selected Task</h2>
44 |         {!selectedTask && <p>Click on a task to view its details</p>}
45 |         {selectedTask && (
46 |           <div>
47 |             <h3 className="text-lg font-bold">{selectedTask.text}</h3>
48 |             <p>Key: {selectedTask.key}</p>
49 |             <p>Duration: {selectedTask.duration} day(s)</p>
50 |             <p>Depends on: {selectedTask.dependsOn?.join(", ")}</p>
51 |             <p>Early Start: {selectedTask.earlyStart}</p>
52 |             <p>Early Finish: {selectedTask.earlyFinish}</p>
53 |             <p>Late Start: {selectedTask.lateStart}</p>
54 |             <p>Late Finish: {selectedTask.lateFinish}</p>
55 |             <p>Level: {selectedTask.level}</p>
56 |             <p>Critical: {selectedTask.critical ? "Yes" : "No"}</p>
57 |             <p>Free Float: {selectedTask.freeFloat}</p>
58 |             <p>Total Float: {selectedTask.totalFloat}</p>
59 |           </div>
60 |         )}
61 |       </div>
62 |     </ScrollArea>
63 |   );
64 | });
65 | 


--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
 1 | import { Card } from "@/components/ui/card";
 2 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 3 | 
 4 | import { PertStyles, Task } from "@@/lib/main";
 5 | import { memo, useState } from "react";
 6 | import { StyleOptions } from "./StyleOptions";
 7 | import { PertDetails } from "./PertDetails";
 8 | 
 9 | type SidebarProps = PertStyles & {
10 |   onStyleChange: (key: keyof PertStyles, value: any) => void;
11 |   selectedTask: Task | null;
12 | };
13 | 
14 | export const Sidebar = memo(
15 |   ({ onStyleChange, selectedTask, ...styles }: SidebarProps) => {
16 |     const [tab, setActiveTab] = useState("details");
17 | 
18 |     return (
19 |       <Card className="h-[calc(100vh-1rem)] w-80">
20 |         <Tabs
21 |           defaultValue="details"
22 |           className="h-full"
23 |           onValueChange={setActiveTab}
24 |           value={tab}
25 |         >
26 |           <TabsList className="w-full grid-cols-2 grid bg-transparent">
27 |             <TabsTrigger value="styles" className="data-[state=active]:bg-accent">
28 |               Styles
29 |             </TabsTrigger>
30 |             <TabsTrigger value="details" className="data-[state=active]:bg-accent">
31 |               Details
32 |             </TabsTrigger>
33 |           </TabsList>
34 |           <TabsContent value="styles" forceMount={true} hidden={"styles" !== tab}>
35 |             <StyleOptions {...styles} onStyleChange={onStyleChange} />
36 |           </TabsContent>
37 |           <TabsContent forceMount={true} value="details" hidden={"details" !== tab}>
38 |             <PertDetails selectedTask={selectedTask} />
39 |           </TabsContent>
40 |         </Tabs>
41 |       </Card>
42 |     );
43 |   }
44 | );
45 | 


--------------------------------------------------------------------------------
/src/components/StyleOptions.tsx:
--------------------------------------------------------------------------------
  1 | import { FontSize, PertStyles } from "@@/lib/main";
  2 | import { memo, useCallback } from "react";
  3 | import {
  4 |   Select,
  5 |   SelectContent,
  6 |   SelectItem,
  7 |   SelectTrigger,
  8 |   SelectValue,
  9 | } from "@/components/ui/select";
 10 | 
 11 | import { Label } from "@/components/ui/label";
 12 | import { Switch } from "@/components/ui/switch";
 13 | import { Slider } from "@/components/ui/slider";
 14 | import { ScrollArea } from "@/components/ui/scroll-area";
 15 | import { Color } from "./Color";
 16 | import { CopyDrawer } from "./CopyDrawer";
 17 | import { Separator } from "./ui/separator";
 18 | 
 19 | const fontFamilies = [
 20 |   "Arial",
 21 |   "Roboto",
 22 |   "Helvetica",
 23 |   "Times New Roman",
 24 |   "sans-serif",
 25 |   "system-ui",
 26 | ];
 27 | 
 28 | const fontSizes: FontSize[] = ["sm", "md", "lg", "xl", "2xl", "3xl"];
 29 | 
 30 | type StyleOptionsProps = PertStyles & {
 31 |   onStyleChange: (key: keyof PertStyles, value: any) => void;
 32 | };
 33 | 
 34 | export const StyleOptions = memo(({ onStyleChange, ...styles }: StyleOptionsProps) => {
 35 |   const handleChange = useCallback(
 36 |     (key: keyof PertStyles, value: any) => {
 37 |       onStyleChange(key, value);
 38 |     },
 39 |     [onStyleChange]
 40 |   );
 41 | 
 42 |   return (
 43 |     <ScrollArea className="h-[calc(100vh-3.5rem)] px-4 pb-4">
 44 |       <div className="space-y-6">
 45 |         <div>
 46 |           <div className="flex justify-between">
 47 |             <h2 className="text-lg font-semibold mb-4">Chart Properties</h2>
 48 |             <CopyDrawer styles={styles} />
 49 |           </div>
 50 | 
 51 |           {/* Grid Settings */}
 52 |           <div className="space-y-4 mb-6 pb-4 border-b">
 53 |             <h3 className="font-medium text-sm">Chart Settings</h3>
 54 |             <div className="flex justify-between items-center">
 55 |               <Label htmlFor="grid-color">Chart Background</Label>
 56 |               <Separator className="flex-1 mx-2" />
 57 |               <Color
 58 |                 color={styles.chartBackground}
 59 |                 colorName="chartBackground"
 60 |                 handleChange={handleChange}
 61 |               />
 62 |             </div>
 63 |             <div className="flex items-center justify-between">
 64 |               <Label htmlFor="disable-grid">Disable Grid</Label>
 65 |               <Switch
 66 |                 id="disable-grid"
 67 |                 checked={styles.disableGrid}
 68 |                 onCheckedChange={(checked) => handleChange("disableGrid", checked)}
 69 |               />
 70 |             </div>
 71 |             <div className="flex justify-between items-center">
 72 |               <Label htmlFor="grid-color">Grid Color</Label>
 73 |               <Separator className="flex-1 mx-2" />
 74 |               <Color
 75 |                 color={styles.gridColor}
 76 |                 colorName="gridColor"
 77 |                 handleChange={handleChange}
 78 |               />
 79 |             </div>
 80 |           </div>
 81 | 
 82 |           {/* Task Node Settings */}
 83 |           <div className="space-y-4 mb-6 pb-4 border-b">
 84 |             <h3 className="font-medium text-sm">Task Node Settings</h3>
 85 |             <div className="space-y-2">
 86 |               <Label>Task Size ({styles.taskSize}px)</Label>
 87 |               <Slider
 88 |                 value={[styles.taskSize || 100]}
 89 |                 min={70}
 90 |                 max={200}
 91 |                 step={1}
 92 |                 onValueChange={([value]) => handleChange("taskSize", value)}
 93 |               />
 94 |             </div>
 95 |             <div className="space-y-2">
 96 |               <Label htmlFor="font-family">Font Family</Label>
 97 |               <Select
 98 |                 value={styles.fontFamily}
 99 |                 onValueChange={(value) => handleChange("fontFamily", value)}
100 |               >
101 |                 <SelectTrigger>
102 |                   <SelectValue placeholder="Select font family" />
103 |                 </SelectTrigger>
104 |                 <SelectContent>
105 |                   {fontFamilies.map((font) => (
106 |                     <SelectItem key={font} value={font}>
107 |                       {font}
108 |                     </SelectItem>
109 |                   ))}
110 |                 </SelectContent>
111 |               </Select>
112 |             </div>
113 |             <div className="space-y-2">
114 |               <Label htmlFor="font-size">Font Size</Label>
115 |               <Select
116 |                 value={String(styles.fontSize)}
117 |                 onValueChange={(value) => handleChange("fontSize", value)}
118 |               >
119 |                 <SelectTrigger>
120 |                   <SelectValue placeholder="Select font size" />
121 |                 </SelectTrigger>
122 |                 <SelectContent>
123 |                   {fontSizes.map((size) => (
124 |                     <SelectItem key={size} value={String(size)}>
125 |                       {size}
126 |                     </SelectItem>
127 |                   ))}
128 |                 </SelectContent>
129 |               </Select>
130 |             </div>
131 |             <div className="space-y-2 flex justify-between items-center">
132 |               <Label htmlFor="text-color">Text Color</Label>
133 |               <Separator className="flex-1 mx-2" />
134 |               <Color
135 |                 color={styles.textColor}
136 |                 colorName="textColor"
137 |                 handleChange={handleChange}
138 |               />
139 |             </div>
140 |             <div className="space-y-2 flex justify-between items-center">
141 |               <Label htmlFor="task-background">Task Background</Label>
142 |               <Separator className="flex-1 mx-2" />
143 |               <Color
144 |                 color={styles.taskBackground}
145 |                 colorName="taskBackground"
146 |                 handleChange={handleChange}
147 |               />
148 |             </div>
149 |           </div>
150 | 
151 |           {/* Border Settings */}
152 |           <div className="space-y-4 mb-6 pb-4 border-b">
153 |             <h3 className="font-medium text-sm">Border Settings</h3>
154 |             <div className="space-y-2">
155 |               <Label>Border Width ({styles.borderWidth}px)</Label>
156 |               <Slider
157 |                 value={[styles.borderWidth || 1]}
158 |                 min={1}
159 |                 max={5}
160 |                 step={1}
161 |                 onValueChange={([value]) => handleChange("borderWidth", value)}
162 |               />
163 |             </div>
164 |             <div className="space-y-2">
165 |               <Label>Selected Border Width ({styles.selectedBorderWidth}px)</Label>
166 |               <Slider
167 |                 value={[styles.selectedBorderWidth || 3]}
168 |                 min={1}
169 |                 max={5}
170 |                 step={1}
171 |                 onValueChange={([value]) => handleChange("selectedBorderWidth", value)}
172 |               />
173 |             </div>
174 |             <div className="space-y-2">
175 |               <Label>Hover Border Width ({styles.hoverBorderWidth}px)</Label>
176 |               <Slider
177 |                 value={[styles.hoverBorderWidth || 2]}
178 |                 min={1}
179 |                 max={5}
180 |                 step={1}
181 |                 onValueChange={([value]) => handleChange("hoverBorderWidth", value)}
182 |               />
183 |             </div>
184 |             <div className="space-y-2 flex justify-between items-center">
185 |               <Label htmlFor="border-color">Border Color</Label>
186 | 
187 |               <Separator className="flex-1 mx-2" />
188 |               <Color
189 |                 color={styles.borderColor}
190 |                 colorName="borderColor"
191 |                 handleChange={handleChange}
192 |               />
193 |             </div>
194 |             <div className="space-y-2 flex justify-between items-center">
195 |               <Label htmlFor="selected-border-color">Selected Border Color</Label>
196 | 
197 |               <Separator className="flex-1 mx-2" />
198 |               <Color
199 |                 color={styles.selectedBorderColor}
200 |                 colorName="selectedBorderColor"
201 |                 handleChange={handleChange}
202 |               />
203 |             </div>
204 |           </div>
205 | 
206 |           {/* Arrow Settings */}
207 |           <div className="space-y-4 mb-6 pb-4 border-b">
208 |             <h3 className="font-medium text-sm">Arrow Settings</h3>
209 |             <div className="space-y-2">
210 |               <Label>Arrow Width ({styles.arrowWidth}px)</Label>
211 |               <Slider
212 |                 value={[styles.arrowWidth || 2]}
213 |                 min={1}
214 |                 max={5}
215 |                 step={1}
216 |                 onValueChange={([value]) => handleChange("arrowWidth", value)}
217 |               />
218 |             </div>
219 |             <div className="space-y-2 flex justify-between items-center">
220 |               <Label htmlFor="arrow-color">Arrow Color</Label>
221 | 
222 |               <Separator className="flex-1 mx-2" />
223 |               <Color
224 |                 color={styles.arrowColor}
225 |                 colorName="arrowColor"
226 |                 handleChange={handleChange}
227 |               />
228 |             </div>
229 |             <div className="space-y-2 flex justify-between items-center">
230 |               <Label htmlFor="critical-color">Critical Path Color</Label>
231 | 
232 |               <Separator className="flex-1 mx-2" />
233 |               <Color
234 |                 color={styles.criticalColor}
235 |                 colorName="criticalColor"
236 |                 handleChange={handleChange}
237 |               />
238 |             </div>
239 |           </div>
240 | 
241 |           {/* Gap Settings */}
242 |           <div className="space-y-4">
243 |             <h3 className="font-medium text-sm">Gap Settings</h3>
244 |             <div className="space-y-2">
245 |               <Label>Horizontal Gap ({styles.gap?.x ?? styles.taskSize}px)</Label>
246 |               <Slider
247 |                 value={[styles.gap?.x ?? styles.taskSize ?? 100]}
248 |                 min={50}
249 |                 max={300}
250 |                 step={10}
251 |                 onValueChange={([value]) =>
252 |                   handleChange("gap", { ...styles.gap, x: value })
253 |                 }
254 |               />
255 |             </div>
256 |             <div className="space-y-2">
257 |               <Label>Vertical Gap ({styles.gap?.y ?? styles.taskSize}px)</Label>
258 |               <Slider
259 |                 value={[styles.gap?.y ?? styles.taskSize ?? 100]}
260 |                 min={50}
261 |                 max={300}
262 |                 step={10}
263 |                 onValueChange={([value]) =>
264 |                   handleChange("gap", { ...styles.gap, y: value })
265 |                 }
266 |               />
267 |             </div>
268 |           </div>
269 |         </div>
270 |       </div>
271 |     </ScrollArea>
272 |   );
273 | });
274 | 


--------------------------------------------------------------------------------
/src/components/TasksDrawer.tsx:
--------------------------------------------------------------------------------
 1 | import { memo, useState } from "react";
 2 | import {
 3 |   Drawer,
 4 |   DrawerContent,
 5 |   DrawerDescription,
 6 |   DrawerHeader,
 7 |   DrawerTitle,
 8 |   DrawerTrigger,
 9 | } from "@/components/ui/drawer";
10 | import { Button } from "@/components/ui/button";
11 | import { Textarea } from "@/components/ui/textarea";
12 | import { TaskInput } from "@@/lib/main";
13 | import { initTasks } from "@/constants/initStates";
14 | import { AlertCircle } from "lucide-react";
15 | 
16 | interface TasksDrawerProps {
17 |   setTasks: (tasks: TaskInput[]) => void;
18 | }
19 | 
20 | export const TasksDrawer = memo(({ setTasks }: TasksDrawerProps) => {
21 |   const [jsonInput, setJsonInput] = useState(
22 |     `[\n${initTasks.map((obj) => `  ${JSON.stringify(obj)}`).join(",\n")}\n]`
23 |   );
24 |   const [error, setError] = useState<string | null>(null);
25 | 
26 |   const handleJsonChange = (value: string) => {
27 |     setJsonInput(value);
28 |     setError(null);
29 | 
30 |     if (!value.trim()) {
31 |       return;
32 |     }
33 | 
34 |     try {
35 |       const parsedJson = JSON.parse(value);
36 |       if (!Array.isArray(parsedJson)) {
37 |         throw new Error("Input must be an array of tasks");
38 |       }
39 |       setTasks(parsedJson);
40 |     } catch (err) {
41 |       setError(err instanceof Error ? err.message : "Invalid JSON format");
42 |     }
43 |   };
44 | 
45 |   return (
46 |     <div className="justify-self-end">
47 |       <Drawer>
48 |         <DrawerTrigger asChild>
49 |           <Button variant="outline">Edit Tasks</Button>
50 |         </DrawerTrigger>
51 |         <DrawerContent className="w-full">
52 |           <div className="mx-auto w-full max-w-2xl">
53 |             <DrawerHeader>
54 |               <DrawerTitle>Edit Tasks</DrawerTitle>
55 |               <DrawerDescription className="text-sm text-muted-foreground">
56 |                 Paste your tasks JSON array below. Example format:
57 |                 <code className="block mt-2 p-2 bg-muted rounded-md text-xs">{`[ { "key": "1", "duration": 5, "text": "A", "dependsOn": ["8", "10", "11"] } ]`}</code>
58 |               </DrawerDescription>
59 |             </DrawerHeader>
60 |             <div className="p-4 pt-0">
61 |               <Textarea
62 |                 value={jsonInput}
63 |                 onChange={(e) => handleJsonChange(e.target.value)}
64 |                 placeholder="Paste your JSON here..."
65 |                 className="min-h-[300px] resize-none font-mono text-sm
66 |                 overflow-y-auto [&::-webkit-scrollbar]:w-1.5
67 |                 [&::-webkit-scrollbar-thumb]:rounded-full
68 |                 [&::-webkit-scrollbar-track]:bg-transparent 
69 |                 [&::-webkit-scrollbar-thumb]:bg-border"
70 |               />
71 |               {error && (
72 |                 <div className="flex gap-2 items-center text-sm text-destructive mt-2 p-2 rounded-md border border-destructive">
73 |                   <AlertCircle className="w-4 h-4 inline-block" />
74 |                   <p>{error}</p>
75 |                 </div>
76 |               )}
77 |             </div>
78 |           </div>
79 |         </DrawerContent>
80 |       </Drawer>
81 |     </div>
82 |   );
83 | });
84 | 


--------------------------------------------------------------------------------
/src/components/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | import { Moon, Sun } from "lucide-react";
 2 | import { Button } from "@/components/ui/button";
 3 | import { useTheme } from "@/components/theme-provider";
 4 | 
 5 | export function ModeToggle() {
 6 |   const { setTheme, theme } = useTheme();
 7 | 
 8 |   return (
 9 |     <Button
10 |       variant="outline"
11 |       size="icon"
12 |       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
13 |     >
14 |       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
15 |       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
16 |     </Button>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useEffect, useState } from "react";
 2 | 
 3 | type Theme = "dark" | "light" | "system";
 4 | 
 5 | type ThemeProviderProps = {
 6 |   children: React.ReactNode;
 7 |   defaultTheme?: Theme;
 8 |   storageKey?: string;
 9 | };
10 | 
11 | type ThemeProviderState = {
12 |   theme: Theme;
13 |   setTheme: (theme: Theme) => void;
14 | };
15 | 
16 | const initialState: ThemeProviderState = {
17 |   theme: "system",
18 |   setTheme: () => null,
19 | };
20 | 
21 | const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
22 | 
23 | export function ThemeProvider({
24 |   children,
25 |   defaultTheme = "dark",
26 |   storageKey = "vite-ui-theme",
27 |   ...props
28 | }: ThemeProviderProps) {
29 |   const [theme, setTheme] = useState<Theme>(
30 |     () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
31 |   );
32 | 
33 |   useEffect(() => {
34 |     const root = window.document.documentElement;
35 | 
36 |     root.classList.remove("light", "dark");
37 | 
38 |     if (theme === "system") {
39 |       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
40 |         ? "dark"
41 |         : "light";
42 | 
43 |       root.classList.add(systemTheme);
44 |       return;
45 |     }
46 | 
47 |     root.classList.add(theme);
48 |   }, [theme]);
49 | 
50 |   const value = {
51 |     theme,
52 |     setTheme: (theme: Theme) => {
53 |       localStorage.setItem(storageKey, theme);
54 |       setTheme(theme);
55 |     },
56 |   };
57 | 
58 |   return (
59 |     <ThemeProviderContext.Provider {...props} value={value}>
60 |       {children}
61 |     </ThemeProviderContext.Provider>
62 |   );
63 | }
64 | 
65 | export const useTheme = () => {
66 |   const context = useContext(ThemeProviderContext);
67 | 
68 |   if (context === undefined)
69 |     throw new Error("useTheme must be used within a ThemeProvider");
70 | 
71 |   return context;
72 | };
73 | 


--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | const Alert = React.forwardRef<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div
27 |     ref={ref}
28 |     role="alert"
29 |     className={cn(alertVariants({ variant }), className)}
30 |     {...props}
31 |   />
32 | ))
33 | Alert.displayName = "Alert"
34 | 
35 | const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <h5
40 |     ref={ref}
41 |     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42 |     {...props}
43 |   />
44 | ))
45 | AlertTitle.displayName = "AlertTitle"
46 | 
47 | const AlertDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm [&_p]:leading-relaxed", className)}
54 |     {...props}
55 |   />
56 | ))
57 | AlertDescription.displayName = "AlertDescription"
58 | 
59 | export { Alert, AlertTitle, AlertDescription }
60 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLDivElement,
46 |   React.HTMLAttributes<HTMLDivElement>
47 | >(({ className, ...props }, ref) => (
48 |   <div
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Drawer as DrawerPrimitive } from "vaul"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | 
  6 | const Drawer = ({
  7 |   shouldScaleBackground = true,
  8 |   ...props
  9 | }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
 10 |   <DrawerPrimitive.Root
 11 |     shouldScaleBackground={shouldScaleBackground}
 12 |     {...props}
 13 |   />
 14 | )
 15 | Drawer.displayName = "Drawer"
 16 | 
 17 | const DrawerTrigger = DrawerPrimitive.Trigger
 18 | 
 19 | const DrawerPortal = DrawerPrimitive.Portal
 20 | 
 21 | const DrawerClose = DrawerPrimitive.Close
 22 | 
 23 | const DrawerOverlay = React.forwardRef<
 24 |   React.ElementRef<typeof DrawerPrimitive.Overlay>,
 25 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 26 | >(({ className, ...props }, ref) => (
 27 |   <DrawerPrimitive.Overlay
 28 |     ref={ref}
 29 |     className={cn("fixed inset-0 z-50 bg-black/80", className)}
 30 |     {...props}
 31 |   />
 32 | ))
 33 | DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 34 | 
 35 | const DrawerContent = React.forwardRef<
 36 |   React.ElementRef<typeof DrawerPrimitive.Content>,
 37 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 38 | >(({ className, children, ...props }, ref) => (
 39 |   <DrawerPortal>
 40 |     <DrawerOverlay />
 41 |     <DrawerPrimitive.Content
 42 |       ref={ref}
 43 |       className={cn(
 44 |         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
 45 |         className
 46 |       )}
 47 |       {...props}
 48 |     >
 49 |       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
 50 |       {children}
 51 |     </DrawerPrimitive.Content>
 52 |   </DrawerPortal>
 53 | ))
 54 | DrawerContent.displayName = "DrawerContent"
 55 | 
 56 | const DrawerHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 62 |     {...props}
 63 |   />
 64 | )
 65 | DrawerHeader.displayName = "DrawerHeader"
 66 | 
 67 | const DrawerFooter = ({
 68 |   className,
 69 |   ...props
 70 | }: React.HTMLAttributes<HTMLDivElement>) => (
 71 |   <div
 72 |     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 73 |     {...props}
 74 |   />
 75 | )
 76 | DrawerFooter.displayName = "DrawerFooter"
 77 | 
 78 | const DrawerTitle = React.forwardRef<
 79 |   React.ElementRef<typeof DrawerPrimitive.Title>,
 80 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 81 | >(({ className, ...props }, ref) => (
 82 |   <DrawerPrimitive.Title
 83 |     ref={ref}
 84 |     className={cn(
 85 |       "text-lg font-semibold leading-none tracking-tight",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 92 | 
 93 | const DrawerDescription = React.forwardRef<
 94 |   React.ElementRef<typeof DrawerPrimitive.Description>,
 95 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 96 | >(({ className, ...props }, ref) => (
 97 |   <DrawerPrimitive.Description
 98 |     ref={ref}
 99 |     className={cn("text-sm text-muted-foreground", className)}
100 |     {...props}
101 |   />
102 | ))
103 | DrawerDescription.displayName = DrawerPrimitive.Description.displayName
104 | 
105 | export {
106 |   Drawer,
107 |   DrawerPortal,
108 |   DrawerOverlay,
109 |   DrawerTrigger,
110 |   DrawerClose,
111 |   DrawerContent,
112 |   DrawerHeader,
113 |   DrawerFooter,
114 |   DrawerTitle,
115 |   DrawerDescription,
116 | }
117 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const labelVariants = cva(
 8 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 9 | )
10 | 
11 | const Label = React.forwardRef<
12 |   React.ElementRef<typeof LabelPrimitive.Root>,
13 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14 |     VariantProps<typeof labelVariants>
15 | >(({ className, ...props }, ref) => (
16 |   <LabelPrimitive.Root
17 |     ref={ref}
18 |     className={cn(labelVariants(), className)}
19 |     {...props}
20 |   />
21 | ))
22 | Label.displayName = LabelPrimitive.Root.displayName
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverAnchor = PopoverPrimitive.Anchor
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ))
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const ScrollArea = React.forwardRef<
 7 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 9 | >(({ className, children, ...props }, ref) => (
10 |   <ScrollAreaPrimitive.Root
11 |     ref={ref}
12 |     className={cn("relative overflow-hidden", className)}
13 |     {...props}
14 |   >
15 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
16 |       {children}
17 |     </ScrollAreaPrimitive.Viewport>
18 |     <ScrollBar />
19 |     <ScrollAreaPrimitive.Corner />
20 |   </ScrollAreaPrimitive.Root>
21 | ))
22 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
23 | 
24 | const ScrollBar = React.forwardRef<
25 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27 | >(({ className, orientation = "vertical", ...props }, ref) => (
28 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
29 |     ref={ref}
30 |     orientation={orientation}
31 |     className={cn(
32 |       "flex touch-none select-none transition-colors",
33 |       orientation === "vertical" &&
34 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
35 |       orientation === "horizontal" &&
36 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
37 |       className
38 |     )}
39 |     {...props}
40 |   >
41 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
42 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
43 | ))
44 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
45 | 
46 | export { ScrollArea, ScrollBar }
47 | 


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as SelectPrimitive from "@radix-ui/react-select";
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const Select = SelectPrimitive.Root;
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group;
 12 | 
 13 | const SelectValue = SelectPrimitive.Value;
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ));
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn("flex cursor-default items-center justify-center py-1", className)}
 42 |     {...props}
 43 |   >
 44 |     <ChevronUp className="h-4 w-4" />
 45 |   </SelectPrimitive.ScrollUpButton>
 46 | ));
 47 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 48 | 
 49 | const SelectScrollDownButton = React.forwardRef<
 50 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 51 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 52 | >(({ className, ...props }, ref) => (
 53 |   <SelectPrimitive.ScrollDownButton
 54 |     ref={ref}
 55 |     className={cn("flex cursor-default items-center justify-center py-1", className)}
 56 |     {...props}
 57 |   >
 58 |     <ChevronDown className="h-4 w-4" />
 59 |   </SelectPrimitive.ScrollDownButton>
 60 | ));
 61 | SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 62 | 
 63 | const SelectContent = React.forwardRef<
 64 |   React.ElementRef<typeof SelectPrimitive.Content>,
 65 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 66 | >(({ className, children, position = "popper", ...props }, ref) => (
 67 |   <SelectPrimitive.Portal>
 68 |     <SelectPrimitive.Content
 69 |       ref={ref}
 70 |       className={cn(
 71 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 72 |         position === "popper" &&
 73 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 74 |         className
 75 |       )}
 76 |       position={position}
 77 |       {...props}
 78 |     >
 79 |       <SelectScrollUpButton />
 80 |       <SelectPrimitive.Viewport
 81 |         className={cn(
 82 |           "p-1",
 83 |           position === "popper" &&
 84 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 85 |         )}
 86 |       >
 87 |         {children}
 88 |       </SelectPrimitive.Viewport>
 89 |       <SelectScrollDownButton />
 90 |     </SelectPrimitive.Content>
 91 |   </SelectPrimitive.Portal>
 92 | ));
 93 | SelectContent.displayName = SelectPrimitive.Content.displayName;
 94 | 
 95 | const SelectLabel = React.forwardRef<
 96 |   React.ElementRef<typeof SelectPrimitive.Label>,
 97 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 98 | >(({ className, ...props }, ref) => (
 99 |   <SelectPrimitive.Label
100 |     ref={ref}
101 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
102 |     {...props}
103 |   />
104 | ));
105 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
106 | 
107 | const SelectItem = React.forwardRef<
108 |   React.ElementRef<typeof SelectPrimitive.Item>,
109 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
110 | >(({ className, children, ...props }, ref) => (
111 |   <SelectPrimitive.Item
112 |     ref={ref}
113 |     className={cn(
114 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
115 |       className
116 |     )}
117 |     {...props}
118 |   >
119 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
120 |       <SelectPrimitive.ItemIndicator>
121 |         <Check className="h-4 w-4" />
122 |       </SelectPrimitive.ItemIndicator>
123 |     </span>
124 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
125 |   </SelectPrimitive.Item>
126 | ));
127 | SelectItem.displayName = SelectPrimitive.Item.displayName;
128 | 
129 | const SelectSeparator = React.forwardRef<
130 |   React.ElementRef<typeof SelectPrimitive.Separator>,
131 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
132 | >(({ className, ...props }, ref) => (
133 |   <SelectPrimitive.Separator
134 |     ref={ref}
135 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
136 |     {...props}
137 |   />
138 | ));
139 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
140 | 
141 | export {
142 |   Select,
143 |   SelectGroup,
144 |   SelectValue,
145 |   SelectTrigger,
146 |   SelectContent,
147 |   SelectLabel,
148 |   SelectItem,
149 |   SelectSeparator,
150 |   SelectScrollUpButton,
151 |   SelectScrollDownButton,
152 | };
153 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Separator = React.forwardRef<
 7 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 9 | >(
10 |   (
11 |     { className, orientation = "horizontal", decorative = true, ...props },
12 |     ref
13 |   ) => (
14 |     <SeparatorPrimitive.Root
15 |       ref={ref}
16 |       decorative={decorative}
17 |       orientation={orientation}
18 |       className={cn(
19 |         "shrink-0 bg-border",
20 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   )
26 | )
27 | Separator.displayName = SeparatorPrimitive.Root.displayName
28 | 
29 | export { Separator }
30 | 


--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SliderPrimitive from "@radix-ui/react-slider"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Slider = React.forwardRef<
 9 |   React.ElementRef<typeof SliderPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SliderPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex w-full touch-none select-none items-center",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
21 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
22 |     </SliderPrimitive.Track>
23 |     <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
24 |   </SliderPrimitive.Root>
25 | ))
26 | Slider.displayName = SliderPrimitive.Root.displayName
27 | 
28 | export { Slider }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Switch = React.forwardRef<
 7 |   React.ElementRef<typeof SwitchPrimitives.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SwitchPrimitives.Root
11 |     className={cn(
12 |       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
13 |       className
14 |     )}
15 |     {...props}
16 |     ref={ref}
17 |   >
18 |     <SwitchPrimitives.Thumb
19 |       className={cn(
20 |         "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
21 |       )}
22 |     />
23 |   </SwitchPrimitives.Root>
24 | ))
25 | Switch.displayName = SwitchPrimitives.Root.displayName
26 | 
27 | export { Switch }
28 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Tabs = TabsPrimitive.Root
 7 | 
 8 | const TabsList = React.forwardRef<
 9 |   React.ElementRef<typeof TabsPrimitive.List>,
10 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
11 | >(({ className, ...props }, ref) => (
12 |   <TabsPrimitive.List
13 |     ref={ref}
14 |     className={cn(
15 |       "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | TabsList.displayName = TabsPrimitive.List.displayName
22 | 
23 | const TabsTrigger = React.forwardRef<
24 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
26 | >(({ className, ...props }, ref) => (
27 |   <TabsPrimitive.Trigger
28 |     ref={ref}
29 |     className={cn(
30 |       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
31 |       className
32 |     )}
33 |     {...props}
34 |   />
35 | ))
36 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
37 | 
38 | const TabsContent = React.forwardRef<
39 |   React.ElementRef<typeof TabsPrimitive.Content>,
40 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
41 | >(({ className, ...props }, ref) => (
42 |   <TabsPrimitive.Content
43 |     ref={ref}
44 |     className={cn(
45 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
46 |       className
47 |     )}
48 |     {...props}
49 |   />
50 | ))
51 | TabsContent.displayName = TabsPrimitive.Content.displayName
52 | 
53 | export { Tabs, TabsList, TabsTrigger, TabsContent }
54 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 | 


--------------------------------------------------------------------------------
/src/constants/initStates.ts:
--------------------------------------------------------------------------------
 1 | import { PertStyles, TaskInput } from "@@/lib/main";
 2 | 
 3 | export const initTasks: TaskInput[] = [
 4 |   { key: "1", duration: 5, text: "A", dependsOn: ["8", "9", "10"] },
 5 |   { key: "2", duration: 4, text: "B", dependsOn: ["9", "10"] },
 6 |   { key: "3", duration: 2, text: "C" },
 7 |   { key: "4", duration: 3, text: "D", dependsOn: ["5", "8"] },
 8 |   { key: "5", duration: 6, text: "E", dependsOn: ["3"] },
 9 |   { key: "6", duration: 8, text: "F" },
10 |   { key: "7", duration: 3, text: "G" },
11 |   { key: "8", duration: 5, text: "H", dependsOn: ["3", "6", "7"] },
12 |   { key: "9", duration: 5, text: "J", dependsOn: ["3", "6"] },
13 |   { key: "10", duration: 2, text: "K", dependsOn: ["6", "7"] },
14 | ];
15 | 
16 | export const initialStyles: PertStyles = {
17 |   disableGrid: false,
18 |   taskSize: 100,
19 |   fontFamily: "system-ui",
20 |   fontSize: "md",
21 |   textColor: "#000000",
22 |   chartBackground: "#ffffff00",
23 |   taskBackground: "#aaaeff",
24 |   gridColor: "#83838350",
25 |   borderWidth: 1,
26 |   selectedBorderWidth: 3,
27 |   hoverBorderWidth: 2,
28 |   borderColor: "#615f77",
29 |   selectedBorderColor: "#6868ff",
30 |   criticalColor: "#ff9147",
31 |   arrowColor: "#615f77",
32 |   arrowWidth: 2,
33 |   gap: { x: 100, y: 100 },
34 | };
35 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 240 10% 3.9%;
 9 |     --card: 0 0% 100%;
10 |     --card-foreground: 240 10% 3.9%;
11 |     --popover: 0 0% 100%;
12 |     --popover-foreground: 240 10% 3.9%;
13 |     --primary: 240 5.9% 10%;
14 |     --primary-foreground: 0 0% 98%;
15 |     --secondary: 240 4.8% 95.9%;
16 |     --secondary-foreground: 240 5.9% 10%;
17 |     --muted: 240 4.8% 95.9%;
18 |     --muted-foreground: 240 3.8% 46.1%;
19 |     --accent: 240 4.8% 95.9%;
20 |     --accent-foreground: 240 5.9% 10%;
21 |     --destructive: 0 84.2% 60.2%;
22 |     --destructive-foreground: 0 0% 98%;
23 |     --border: 240 5.9% 90%;
24 |     --input: 240 5.9% 90%;
25 |     --ring: 240 10% 3.9%;
26 |     --chart-1: 12 76% 61%;
27 |     --chart-2: 173 58% 39%;
28 |     --chart-3: 197 37% 24%;
29 |     --chart-4: 43 74% 66%;
30 |     --chart-5: 27 87% 67%;
31 |     --radius: 0.5rem
32 |   }
33 | 
34 |   .dark {
35 |     --background: 240 10% 3.9%;
36 |     --foreground: 0 0% 98%;
37 |     --card: 240 10% 3.9%;
38 |     --card-foreground: 0 0% 98%;
39 |     --popover: 240 10% 3.9%;
40 |     --popover-foreground: 0 0% 98%;
41 |     --primary: 0 0% 98%;
42 |     --primary-foreground: 240 5.9% 10%;
43 |     --secondary: 240 3.7% 15.9%;
44 |     --secondary-foreground: 0 0% 98%;
45 |     --muted: 240 3.7% 15.9%;
46 |     --muted-foreground: 240 5% 64.9%;
47 |     --accent: 240 3.7% 15.9%;
48 |     --accent-foreground: 0 0% 98%;
49 |     --destructive: 0 62.8% 30.6%;
50 |     --destructive-foreground: 0 0% 98%;
51 |     --border: 240 3.7% 15.9%;
52 |     --input: 240 3.7% 15.9%;
53 |     --ring: 240 4.9% 83.9%;
54 |     --chart-1: 220 70% 50%;
55 |     --chart-2: 160 60% 45%;
56 |     --chart-3: 30 80% 55%;
57 |     --chart-4: 280 65% 60%;
58 |     --chart-5: 340 75% 55%
59 |   }
60 | }
61 | 
62 | @layer base {
63 |   * {
64 |     @apply border-border;
65 |   }
66 | 
67 |   body {
68 |     @apply bg-background text-foreground;
69 |   }
70 | }


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import App from "./App.tsx";
 4 | import { ThemeProvider } from "@/components/theme-provider";
 5 | import { PertProvider } from "@@/lib/main";
 6 | 
 7 | createRoot(document.getElementById("root")!).render(
 8 |   <StrictMode>
 9 |     <ThemeProvider>
10 |       <PertProvider>
11 |         <App />
12 |       </PertProvider>
13 |     </ThemeProvider>
14 |   </StrictMode>
15 | );
16 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |     darkMode: ["class"],
 4 |     content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
 5 |   theme: {
 6 |   	extend: {
 7 |   		borderRadius: {
 8 |   			lg: 'var(--radius)',
 9 |   			md: 'calc(var(--radius) - 2px)',
10 |   			sm: 'calc(var(--radius) - 4px)'
11 |   		},
12 |   		colors: {
13 |   			background: 'hsl(var(--background))',
14 |   			foreground: 'hsl(var(--foreground))',
15 |   			card: {
16 |   				DEFAULT: 'hsl(var(--card))',
17 |   				foreground: 'hsl(var(--card-foreground))'
18 |   			},
19 |   			popover: {
20 |   				DEFAULT: 'hsl(var(--popover))',
21 |   				foreground: 'hsl(var(--popover-foreground))'
22 |   			},
23 |   			primary: {
24 |   				DEFAULT: 'hsl(var(--primary))',
25 |   				foreground: 'hsl(var(--primary-foreground))'
26 |   			},
27 |   			secondary: {
28 |   				DEFAULT: 'hsl(var(--secondary))',
29 |   				foreground: 'hsl(var(--secondary-foreground))'
30 |   			},
31 |   			muted: {
32 |   				DEFAULT: 'hsl(var(--muted))',
33 |   				foreground: 'hsl(var(--muted-foreground))'
34 |   			},
35 |   			accent: {
36 |   				DEFAULT: 'hsl(var(--accent))',
37 |   				foreground: 'hsl(var(--accent-foreground))'
38 |   			},
39 |   			destructive: {
40 |   				DEFAULT: 'hsl(var(--destructive))',
41 |   				foreground: 'hsl(var(--destructive-foreground))'
42 |   			},
43 |   			border: 'hsl(var(--border))',
44 |   			input: 'hsl(var(--input))',
45 |   			ring: 'hsl(var(--ring))',
46 |   			chart: {
47 |   				'1': 'hsl(var(--chart-1))',
48 |   				'2': 'hsl(var(--chart-2))',
49 |   				'3': 'hsl(var(--chart-3))',
50 |   				'4': 'hsl(var(--chart-4))',
51 |   				'5': 'hsl(var(--chart-5))'
52 |   			}
53 |   		}
54 |   	}
55 |   },
56 |   plugins: [require("tailwindcss-animate")],
57 | };
58 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 |     "paths": {
 9 |       "react-pert": ["./lib/main.ts"],
10 |       "@/*": ["./src/*"],
11 |       "@@/*": ["./*"]
12 |     },
13 |     "baseUrl": ".",
14 | 
15 |     /* Bundler mode */
16 |     "moduleResolution": "bundler",
17 |     "allowImportingTsExtensions": true,
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx",
22 | 
23 |     /* Linting */
24 |     "strict": true,
25 |     "noUnusedLocals": true,
26 |     "noUnusedParameters": true,
27 |     "noFallthroughCasesInSwitch": true
28 |   },
29 |   "include": ["src", "lib"],
30 |   "references": [{ "path": "./tsconfig.node.json" }]
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 5 |     "skipLibCheck": true,
 6 |     "module": "ESNext",
 7 |     "moduleResolution": "bundler",
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true
10 |   },
11 |   "include": ["vite.config.ts"]
12 | }
13 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | import { resolve } from "path";
 4 | import dts from "vite-plugin-dts";
 5 | import tsConfigPaths from "vite-tsconfig-paths";
 6 | import { libInjectCss } from "vite-plugin-lib-inject-css";
 7 | const appConfig = {
 8 |   plugins: [react()],
 9 |   resolve: {
10 |     alias: {
11 |       "@": resolve(__dirname, "./src"),
12 |       "@@": resolve(__dirname, "./"),
13 |     },
14 |   },
15 | };
16 | const packageConfig = {
17 |   plugins: [
18 |     react(),
19 |     tsConfigPaths(),
20 |     dts({ rollupTypes: true, include: ["lib", "src/vite-env.d.ts"] }),
21 |     libInjectCss(),
22 |   ],
23 |   build: {
24 |     copyPublicDir: false,
25 |     lib: {
26 |       entry: resolve(__dirname, "lib/main.ts"),
27 |       name: "react-pert",
28 |       fileName: "index",
29 |     },
30 |     rollupOptions: {
31 |       external: ["react", "react-dom", "react/jsx-runtime"],
32 |       output: {
33 |         globals: {
34 |           react: "React",
35 |           "react-dom": "ReactDOM",
36 |           "react/jsx-runtime": "react/jsx-runtime",
37 |         },
38 |       },
39 |     },
40 |   },
41 | };
42 | 
43 | export default defineConfig(({ mode }) => {
44 |   return mode === "lib" ? packageConfig : appConfig;
45 | });
46 | 


--------------------------------------------------------------------------------