📝 docs: the documentation was updated and some thing were added on st…

…orybook (#33)

.github/workflows/update-changelog.yml

@@ -0,0 +1,36 @@
+name: Update Changelog
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  generate-changelog:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.0
+
+      - name: Install github-changelog-generator
+        run: |
+          gem install github_changelog_generator
+
+      - name: Generate Changelog
+        env:
+          CHANGELOG_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          github_changelog_generator --user konstructio --project konstruct-ui
+
+      - name: Commit and Push Changes
+        run: |
+          git config --local user.name "github-actions[bot]"
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git add CHANGELOG.md
+          git commit -m "🚀 chore: update changelog [skip ci]"
+          git push

.storybook/main.ts

@@ -1,11 +1,12 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../docs/**/*.mdx', '../lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
-    '@storybook/addon-links',
+    '@storybook/addon-docs',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-links',
     '@storybook/addon-styling-webpack',
   ],
   framework: {

.storybook/preview.ts

@@ -10,6 +10,15 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: [
+          'Documentation',
+          ['Introduction', 'Changelog'],
+          'Design System',
+        ],
+      },
+    },
   },
 };
 

CHANGELOG.md

@@ -0,0 +1,45 @@
+# Changelog
+
+## [0.0.3](https://github.com/konstructio/konstruct-ui/tree/0.0.3) (2024-12-17)
+
+[Full Changelog](https://github.com/konstructio/konstruct-ui/compare/0.0.2...0.0.3)
+
+**Merged pull requests:**
+
+- 💄 chore: new colors palette was added in the konstruct plugin [\#30](https://github.com/konstructio/konstruct-ui/pull/30) ([futjesus](https://github.com/futjesus))
+- ✅ chore: tests have been added [\#29](https://github.com/konstructio/konstruct-ui/pull/29) ([futjesus](https://github.com/futjesus))
+- ✅ chore: tests have been added [\#28](https://github.com/konstructio/konstruct-ui/pull/28) ([futjesus](https://github.com/futjesus))
+
+## [0.0.2](https://github.com/konstructio/konstruct-ui/tree/0.0.2) (2024-11-15)
+
+[Full Changelog](https://github.com/konstructio/konstruct-ui/compare/0.0.1...0.0.2)
+
+## [0.0.1](https://github.com/konstructio/konstruct-ui/tree/0.0.1) (2024-11-15)
+
+[Full Changelog](https://github.com/konstructio/konstruct-ui/compare/609bb156d393ea4b46d7e98d15a84ccd93227ebd...0.0.1)
+
+**Merged pull requests:**
+
+- 🎨 chore: the modal has been improved [\#27](https://github.com/konstructio/konstruct-ui/pull/27) ([futjesus](https://github.com/futjesus))
+- ✅ feat: add testing [\#26](https://github.com/konstructio/konstruct-ui/pull/26) ([futjesus](https://github.com/futjesus))
+- ♿️ chore: add new accesibility component [\#25](https://github.com/konstructio/konstruct-ui/pull/25) ([futjesus](https://github.com/futjesus))
+- ⬆️ chore: some dependencies have been updated [\#24](https://github.com/konstructio/konstruct-ui/pull/24) ([futjesus](https://github.com/futjesus))
+- 🎨 chore: change twMerge by util function [\#23](https://github.com/konstructio/konstruct-ui/pull/23) ([futjesus](https://github.com/futjesus))
+- ✨ feat: toast component was added [\#22](https://github.com/konstructio/konstruct-ui/pull/22) ([futjesus](https://github.com/futjesus))
+- ✨ feat: breadcrumb component was added [\#21](https://github.com/konstructio/konstruct-ui/pull/21) ([futjesus](https://github.com/futjesus))
+- ✨ feat: switch component was added [\#20](https://github.com/konstructio/konstruct-ui/pull/20) ([futjesus](https://github.com/futjesus))
+- ✨ feat: tooltip component was added [\#19](https://github.com/konstructio/konstruct-ui/pull/19) ([futjesus](https://github.com/futjesus))
+- ✨ feat: progressbar component was added [\#17](https://github.com/konstructio/konstruct-ui/pull/17) ([futjesus](https://github.com/futjesus))
+- ⬆️ chore: some dependencies were updated [\#16](https://github.com/konstructio/konstruct-ui/pull/16) ([futjesus](https://github.com/futjesus))
+- ✨ feat: slider component was added [\#15](https://github.com/konstructio/konstruct-ui/pull/15) ([futjesus](https://github.com/futjesus))
+- ✨ feat: text area component [\#10](https://github.com/konstructio/konstruct-ui/pull/10) ([futjesus](https://github.com/futjesus))
+- ⬆️ chore: some dependencies were updated [\#9](https://github.com/konstructio/konstruct-ui/pull/9) ([futjesus](https://github.com/futjesus))
+- ✨ feat: Tag and SelectTag components were added [\#8](https://github.com/konstructio/konstruct-ui/pull/8) ([futjesus](https://github.com/futjesus))
+- ✨ feat: radio button component was added [\#7](https://github.com/konstructio/konstruct-ui/pull/7) ([futjesus](https://github.com/futjesus))
+- ✨ feat: number input component was added [\#6](https://github.com/konstructio/konstruct-ui/pull/6) ([futjesus](https://github.com/futjesus))
+- ✨ feat: checkbox component was added [\#5](https://github.com/konstructio/konstruct-ui/pull/5) ([futjesus](https://github.com/futjesus))
+- 👷 chore: dockerfile was added [\#4](https://github.com/konstructio/konstruct-ui/pull/4) ([futjesus](https://github.com/futjesus))
+- ✨ feat: more features were added to autocomplete component [\#3](https://github.com/konstructio/konstruct-ui/pull/3) ([futjesus](https://github.com/futjesus))
+- ✨ feat: autocomplete component was added [\#2](https://github.com/konstructio/konstruct-ui/pull/2) ([futjesus](https://github.com/futjesus))
+
+\* _This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)_

README.md

@@ -1,3 +1,7 @@
+> 🚧🚨 **Work in Progress** 🚨🚧
+>
+> ⚠️ This library is currently under construction. Features may change and documentation is incomplete. ⚠️
+
 # Konstruct React Component Library
 
 This repository contains a set of reusable and customizable React components built for **Konstruct**'s infrastructure and Kubernetes products. These components aim to streamline the development process, ensuring consistency and high-quality UI for **Kubefirst**, **Colony**, and other future projects.
@@ -10,10 +14,55 @@ This repository contains a set of reusable and customizable React components bui
 - **Accessible**: Built with accessibility in mind, following best practices to ensure compatibility with all users.
 - **Tailwind CSS Integration**: Seamlessly integrated with Tailwind CSS for rapid UI development and easy theming.
 
-## Installation:
+## **Installation Guide**
+
+Follow these steps to integrate `@konstructio/ui` into your project:
+
+### Step 1: Install the Library
+
+Run the following command to install the package:
+
+```bash
+npm install @konstructio/ui
+```
+
+---
+
+### Step 2: Install Tailwind CSS
+
+If you don't already have Tailwind CSS installed, follow the official installation guide from the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation). Ensure that Tailwind is properly configured in your project.
+
+---
+
+### Step 3: Import and Configure the Plugin
+
+To use the components provided by `@konstructio/ui`, you need to import the plugin and add it to your Tailwind CSS configuration file.
+
+Modify your Tailwind configuration file (usually `tailwind.config.js` or `tailwind.config.ts`) as follows:
+
+```ts
+import { konstructPlugin } from '@konstructio/ui';
+
+const config: Config = {
+  plugins: [konstructPlugin],
+};
+```
+
+---
+
+### Step 4: Include `@konstructio/ui` in Tailwind Content
+
+To ensure Tailwind parses the components from `@konstructio/ui`, add its path to the `content` array in your Tailwind configuration file:
 
-Provide instructions on how to install and use the components within your projects.
+```ts
+const config: Config = {
+  content: [
+    // Other content paths
+    './node_modules/@konstructio/ui/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+};
+```
 
-## Contribution:
+## Final Steps
 
-Guidelines for contributing to the repository.
+After completing the above steps, you can now use `@konstructio/ui` components in your project. Restart your development server to apply the changes.

docs/changelog.mdx

@@ -0,0 +1,7 @@
+import { Meta, Markdown } from '@storybook/blocks';
+
+import Readme from '../CHANGELOG.md?raw';
+
+<Meta title="Documentation/Changelog" />
+
+<Markdown>{Readme}</Markdown>

docs/introduction.mdx

@@ -0,0 +1,7 @@
+import { Meta, Markdown } from '@storybook/blocks';
+
+import Readme from '../README.md?raw';
+
+<Meta title="Documentation/Introduction" />
+
+<Markdown>{Readme}</Markdown>

lib/components/AlertDialog/AlertDialog.stories.tsx

@@ -5,6 +5,7 @@ import { AlertDialog as AlertDialogComponent } from './AlertDialog';
 type Story = StoryObj<typeof AlertDialogComponent>;
 
 const meta: Meta<typeof AlertDialogComponent> = {
+  title: 'Design System/AlertDialog',
   component: AlertDialogComponent,
 };
 

lib/components/Autocomplete/Autocomplete.stories.tsx

@@ -5,6 +5,7 @@ import { Autocomplete as AutocompleteComponent } from './Autocomplete';
 type Story = StoryObj<typeof AutocompleteComponent>;
 
 const meta: Meta<typeof AutocompleteComponent> = {
+  title: 'Design System/Autocomplete',
   component: AutocompleteComponent,
 };
 

lib/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from '../../contexts';
 type Story = StoryObj<typeof BreadcrumbComponent>;
 
 const meta: Meta<typeof BreadcrumbComponent> = {
+  title: 'Design System/Breadcrumb',
   component: BreadcrumbComponent,
 };
 

lib/components/Button/Button.stories.tsx

@@ -6,6 +6,7 @@ import { Button } from './Button';
 type Story = StoryObj<typeof Button>;
 
 const meta: Meta<typeof Button> = {
+  title: 'Design System/Button',
   component: Button,
 };
 

lib/components/Checkbox/Checkbox.stories.tsx

@@ -5,6 +5,7 @@ import { Checkbox as CheckboxComponent } from './Checkbox';
 type Story = StoryObj<typeof CheckboxComponent>;
 
 const meta: Meta<typeof CheckboxComponent> = {
+  title: 'Design System/Checkbox',
   component: CheckboxComponent,
 };
 

lib/components/Dropdown/Dropdown.stories.tsx

@@ -5,6 +5,7 @@ import { Dropdown as DropdownComponent } from './Dropdown';
 type Story = StoryObj<typeof DropdownComponent>;
 
 const meta: Meta<typeof DropdownComponent> = {
+  title: 'Design System/Dropdown',
   component: DropdownComponent,
 };
 

lib/components/Input/Input.stories.tsx

@@ -5,6 +5,7 @@ import { Input as InputComponent } from './Input';
 type Story = StoryObj<typeof InputComponent>;
 
 const meta: Meta<typeof InputComponent> = {
+  title: 'Design System/Input',
   component: InputComponent,
 };
 

lib/components/Modal/Modal.stories.tsx

@@ -9,6 +9,7 @@ import { Theme, ThemeProvider, useTheme } from '../../contexts';
 type Story = StoryObj<typeof ModalComponent>;
 
 const meta: Meta<typeof ModalComponent> = {
+  title: 'Design System/Modal',
   component: ModalComponent,
 };
 

lib/components/NumberInput/NumberInput.stories.tsx

@@ -5,6 +5,7 @@ import { NumberInput as NumberInputComponent } from './NumberInput';
 type Story = StoryObj<typeof NumberInputComponent>;
 
 const meta: Meta<typeof NumberInputComponent> = {
+  title: 'Design System/NumberInput',
   component: NumberInputComponent,
 };
 

lib/components/ProgressBar/ProgressBar.stories.tsx

@@ -6,6 +6,7 @@ import { ProgressBar as ProgressBarComponent } from './ProgressBar';
 type Story = StoryObj<typeof ProgressBarComponent>;
 
 const meta: Meta<typeof ProgressBarComponent> = {
+  title: 'Design System/ProgressBar',
   component: ProgressBarComponent,
 };
 

lib/components/Radio/Radio.stories.tsx

@@ -5,6 +5,7 @@ import { Radio as RadioComponent } from './Radio';
 type Story = StoryObj<typeof RadioComponent>;
 
 const meta: Meta<typeof RadioComponent> = {
+  title: 'Design System/Radio',
   component: RadioComponent,
 };
 

lib/components/RadioGroup/RadioGroup.stories.tsx

@@ -5,6 +5,7 @@ import { RadioGroup as RadioGroupComponent } from './RadioGroup';
 type Story = StoryObj<typeof RadioGroupComponent>;
 
 const meta: Meta<typeof RadioGroupComponent> = {
+  title: 'Design System/RadioGroup',
   component: RadioGroupComponent,
 };
 

lib/components/Range/Range.stories.tsx

@@ -5,6 +5,7 @@ import { Range as RangeComponent } from './Range';
 type Story = StoryObj<typeof RangeComponent>;
 
 const meta: Meta<typeof RangeComponent> = {
+  title: 'Design System/Range',
   component: RangeComponent,
 };
 

lib/components/Slider/Slider.stories.tsx

@@ -5,6 +5,7 @@ import { Slider as SliderComponent } from './Slider';
 type Story = StoryObj<typeof SliderComponent>;
 
 const meta: Meta<typeof SliderComponent> = {
+  title: 'Design System/Slider',
   component: SliderComponent,
 };
 

lib/components/Switch/Switch.stories.tsx

@@ -5,6 +5,7 @@ import { Switch as SwitchComponent } from './Switch';
 type Story = StoryObj<typeof SwitchComponent>;
 
 const meta: Meta<typeof SwitchComponent> = {
+  title: 'Design System/Switch',
   component: SwitchComponent,
 };
 

lib/components/Tag/Tag.stories.tsx

@@ -5,6 +5,7 @@ import { Tag as TagComponent } from './Tag';
 type Story = StoryObj<typeof TagComponent>;
 
 const meta: Meta<typeof TagComponent> = {
+  title: 'Design System/Tag',
   component: TagComponent,
 };
 

lib/components/TagSelect/TagSelect.stories.tsx

@@ -5,6 +5,7 @@ import { TagSelect as TagSelectComponent } from './TagSelect';
 type Story = StoryObj<typeof TagSelectComponent>;
 
 const meta: Meta<typeof TagSelectComponent> = {
+  title: 'Design System/TagSelect',
   component: TagSelectComponent,
 };
 

lib/components/TextArea/TextArea.stories.tsx

@@ -5,6 +5,7 @@ import { TextArea as TextAreaComponent } from './TextArea';
 type Story = StoryObj<typeof TextAreaComponent>;
 
 const meta: Meta<typeof TextAreaComponent> = {
+  title: 'Design System/TextArea',
   component: TextAreaComponent,
 };
 

lib/components/Toast/Toast.stories.tsx

@@ -8,6 +8,7 @@ import { Toast as ToastComponent } from './Toast';
 type Story = StoryObj<typeof ToastComponent>;
 
 const meta: Meta<typeof ToastComponent> = {
+  title: 'Design System/Toast',
   component: ToastComponent,
 };
 

lib/components/Tooltip/Tooltip.stories.tsx

@@ -8,6 +8,7 @@ import { ThemeProvider } from '../../contexts';
 type Story = StoryObj<typeof TooltipComponent>;
 
 const meta: Meta<typeof TooltipComponent> = {
+  title: 'Design System/Tooltip',
   component: TooltipComponent,
 };
 

package.json

@@ -74,6 +74,7 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.1",
+    "@storybook/addon-docs": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",