feat: initial commit of package

.github/workflows/release-package.yml

@@ -0,0 +1,33 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+      - next
+  pull_request:
+    branches:
+      - main
+      - next
+
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+      - run: npm install
+      - run: npm run build
+      - run: npm audit signatures
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.gitignore

@@ -0,0 +1,15 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+build/
+
+# Test coverage
+coverage/
+.nyc_output/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.npmrc

@@ -0,0 +1,3 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+registry=https://registry.npmjs.org/
+always-auth=true

.releaserc

@@ -0,0 +1,17 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "CHANGELOG.md"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ]
+  ]
+}

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 pooulad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,66 @@
+# treeway🌴
+
+Show your files and directories like tree branches🌴
+
+# install with npm
+
+```bash
+npm install @pooulad/treeway
+```
+
+# install with yarn
+
+```bash
+yarn add @pooulad/treeway
+```
+
+# Usage
+
+To use the treeway🌴, use the following example:
+
+```javascript
+import React from "react";
+import Treeway from "@pooulad/treeway";
+
+function Test() {
+  const items = [
+    {
+      name: "folder1",
+      type: "directory",
+      children: [
+        {
+          name: "file-1",
+          type: "file",
+        },
+      ],
+    },
+  ];
+  return (
+    <div>
+      <Treeway items={items} />
+    </div>
+  );
+}
+
+export default Test;
+```
+
+![treeway_props_image](https://github.com/pooulad/treeway/blob/main/images/Treeway_Props.png)
+
+## props
+
+- items: array of objects(node data).
+- backgroundColor: background color for the buttons.
+- direction: direction of treeway to open subitems in left or right.
+
+# sample image of the project
+
+![treeway_preview_image](https://github.com/pooulad/treeway/blob/main/images/Treeway_Screenshot.png)
+
+# Contributing
+
+This is my first package😁. So if you find any issues or have suggestions for improvements, please open an issue or submit a pull request on [GitHub](https://github.com/pooulad/treeway).
+
+# License
+
+This project is licensed under the MIT [License](LICENSE) - see the [License](LICENSE) file for details.