From 0f50d6f02af8a362b06d193373df01c2b2b579a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Manuel=20Fuentes=20Trejo?= Date: Wed, 18 Dec 2024 18:19:38 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20the=20documentation=20wa?= =?UTF-8?q?s=20updated=20and=20some=20thing=20were=20added=20on=20storyboo?= =?UTF-8?q?k=20(#33)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/update-changelog.yml | 36 ++++++++++++ .storybook/main.ts | 5 +- .storybook/preview.ts | 9 +++ CHANGELOG.md | 45 +++++++++++++++ README.md | 57 +++++++++++++++++-- docs/changelog.mdx | 7 +++ docs/introduction.mdx | 7 +++ .../AlertDialog/AlertDialog.stories.tsx | 1 + .../Autocomplete/Autocomplete.stories.tsx | 1 + .../Breadcrumb/Breadcrumb.stories.tsx | 1 + lib/components/Button/Button.stories.tsx | 1 + lib/components/Checkbox/Checkbox.stories.tsx | 1 + lib/components/Dropdown/Dropdown.stories.tsx | 1 + lib/components/Input/Input.stories.tsx | 1 + lib/components/Modal/Modal.stories.tsx | 1 + .../NumberInput/NumberInput.stories.tsx | 1 + .../ProgressBar/ProgressBar.stories.tsx | 1 + lib/components/Radio/Radio.stories.tsx | 1 + .../RadioGroup/RadioGroup.stories.tsx | 1 + lib/components/Range/Range.stories.tsx | 1 + lib/components/Slider/Slider.stories.tsx | 1 + lib/components/Switch/Switch.stories.tsx | 1 + lib/components/Tag/Tag.stories.tsx | 1 + .../TagSelect/TagSelect.stories.tsx | 1 + lib/components/TextArea/TextArea.stories.tsx | 1 + lib/components/Toast/Toast.stories.tsx | 1 + lib/components/Tooltip/Tooltip.stories.tsx | 1 + package-lock.json | 5 +- package.json | 1 + 29 files changed, 184 insertions(+), 8 deletions(-) create mode 100644 .github/workflows/update-changelog.yml create mode 100644 CHANGELOG.md create mode 100644 docs/changelog.mdx create mode 100644 docs/introduction.mdx diff --git a/.github/workflows/update-changelog.yml b/.github/workflows/update-changelog.yml new file mode 100644 index 0000000..d8973cd --- /dev/null +++ b/.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 diff --git a/.storybook/main.ts b/.storybook/main.ts index 73423aa..6039943 100644 --- a/.storybook/main.ts +++ b/.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: { diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 91c5354..c46ad5e 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -10,6 +10,15 @@ const preview: Preview = { date: /Date$/i, }, }, + options: { + storySort: { + order: [ + 'Documentation', + ['Introduction', 'Changelog'], + 'Design System', + ], + }, + }, }, }; diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..268fb42 --- /dev/null +++ b/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)_ diff --git a/README.md b/README.md index 3838991..42a6f68 100644 --- a/README.md +++ b/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. diff --git a/docs/changelog.mdx b/docs/changelog.mdx new file mode 100644 index 0000000..e76e738 --- /dev/null +++ b/docs/changelog.mdx @@ -0,0 +1,7 @@ +import { Meta, Markdown } from '@storybook/blocks'; + +import Readme from '../CHANGELOG.md?raw'; + + + +{Readme} diff --git a/docs/introduction.mdx b/docs/introduction.mdx new file mode 100644 index 0000000..785a166 --- /dev/null +++ b/docs/introduction.mdx @@ -0,0 +1,7 @@ +import { Meta, Markdown } from '@storybook/blocks'; + +import Readme from '../README.md?raw'; + + + +{Readme} diff --git a/lib/components/AlertDialog/AlertDialog.stories.tsx b/lib/components/AlertDialog/AlertDialog.stories.tsx index d779ee4..be1503a 100644 --- a/lib/components/AlertDialog/AlertDialog.stories.tsx +++ b/lib/components/AlertDialog/AlertDialog.stories.tsx @@ -5,6 +5,7 @@ import { AlertDialog as AlertDialogComponent } from './AlertDialog'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/AlertDialog', component: AlertDialogComponent, }; diff --git a/lib/components/Autocomplete/Autocomplete.stories.tsx b/lib/components/Autocomplete/Autocomplete.stories.tsx index 6eb523c..405a073 100644 --- a/lib/components/Autocomplete/Autocomplete.stories.tsx +++ b/lib/components/Autocomplete/Autocomplete.stories.tsx @@ -5,6 +5,7 @@ import { Autocomplete as AutocompleteComponent } from './Autocomplete'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Autocomplete', component: AutocompleteComponent, }; diff --git a/lib/components/Breadcrumb/Breadcrumb.stories.tsx b/lib/components/Breadcrumb/Breadcrumb.stories.tsx index 77c9b5c..8b8d793 100644 --- a/lib/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/lib/components/Breadcrumb/Breadcrumb.stories.tsx @@ -6,6 +6,7 @@ import { ThemeProvider } from '../../contexts'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Breadcrumb', component: BreadcrumbComponent, }; diff --git a/lib/components/Button/Button.stories.tsx b/lib/components/Button/Button.stories.tsx index 4abd2d3..2cfb038 100644 --- a/lib/components/Button/Button.stories.tsx +++ b/lib/components/Button/Button.stories.tsx @@ -6,6 +6,7 @@ import { Button } from './Button'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Button', component: Button, }; diff --git a/lib/components/Checkbox/Checkbox.stories.tsx b/lib/components/Checkbox/Checkbox.stories.tsx index 25ec10c..7744179 100644 --- a/lib/components/Checkbox/Checkbox.stories.tsx +++ b/lib/components/Checkbox/Checkbox.stories.tsx @@ -5,6 +5,7 @@ import { Checkbox as CheckboxComponent } from './Checkbox'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Checkbox', component: CheckboxComponent, }; diff --git a/lib/components/Dropdown/Dropdown.stories.tsx b/lib/components/Dropdown/Dropdown.stories.tsx index 820264c..eaa2b01 100644 --- a/lib/components/Dropdown/Dropdown.stories.tsx +++ b/lib/components/Dropdown/Dropdown.stories.tsx @@ -5,6 +5,7 @@ import { Dropdown as DropdownComponent } from './Dropdown'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Dropdown', component: DropdownComponent, }; diff --git a/lib/components/Input/Input.stories.tsx b/lib/components/Input/Input.stories.tsx index e1afb43..f72a9c3 100644 --- a/lib/components/Input/Input.stories.tsx +++ b/lib/components/Input/Input.stories.tsx @@ -5,6 +5,7 @@ import { Input as InputComponent } from './Input'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Input', component: InputComponent, }; diff --git a/lib/components/Modal/Modal.stories.tsx b/lib/components/Modal/Modal.stories.tsx index 2682413..6d0cbd8 100644 --- a/lib/components/Modal/Modal.stories.tsx +++ b/lib/components/Modal/Modal.stories.tsx @@ -9,6 +9,7 @@ import { Theme, ThemeProvider, useTheme } from '../../contexts'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Modal', component: ModalComponent, }; diff --git a/lib/components/NumberInput/NumberInput.stories.tsx b/lib/components/NumberInput/NumberInput.stories.tsx index 8b943ab..44dad60 100644 --- a/lib/components/NumberInput/NumberInput.stories.tsx +++ b/lib/components/NumberInput/NumberInput.stories.tsx @@ -5,6 +5,7 @@ import { NumberInput as NumberInputComponent } from './NumberInput'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/NumberInput', component: NumberInputComponent, }; diff --git a/lib/components/ProgressBar/ProgressBar.stories.tsx b/lib/components/ProgressBar/ProgressBar.stories.tsx index 11acbe3..fdbe615 100644 --- a/lib/components/ProgressBar/ProgressBar.stories.tsx +++ b/lib/components/ProgressBar/ProgressBar.stories.tsx @@ -6,6 +6,7 @@ import { ProgressBar as ProgressBarComponent } from './ProgressBar'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/ProgressBar', component: ProgressBarComponent, }; diff --git a/lib/components/Radio/Radio.stories.tsx b/lib/components/Radio/Radio.stories.tsx index cfd505a..87fbd76 100644 --- a/lib/components/Radio/Radio.stories.tsx +++ b/lib/components/Radio/Radio.stories.tsx @@ -5,6 +5,7 @@ import { Radio as RadioComponent } from './Radio'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Radio', component: RadioComponent, }; diff --git a/lib/components/RadioGroup/RadioGroup.stories.tsx b/lib/components/RadioGroup/RadioGroup.stories.tsx index cb44cb4..8a312ec 100644 --- a/lib/components/RadioGroup/RadioGroup.stories.tsx +++ b/lib/components/RadioGroup/RadioGroup.stories.tsx @@ -5,6 +5,7 @@ import { RadioGroup as RadioGroupComponent } from './RadioGroup'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/RadioGroup', component: RadioGroupComponent, }; diff --git a/lib/components/Range/Range.stories.tsx b/lib/components/Range/Range.stories.tsx index 437ab7d..030b0f0 100644 --- a/lib/components/Range/Range.stories.tsx +++ b/lib/components/Range/Range.stories.tsx @@ -5,6 +5,7 @@ import { Range as RangeComponent } from './Range'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Range', component: RangeComponent, }; diff --git a/lib/components/Slider/Slider.stories.tsx b/lib/components/Slider/Slider.stories.tsx index 58ad0a9..1e2e9e9 100644 --- a/lib/components/Slider/Slider.stories.tsx +++ b/lib/components/Slider/Slider.stories.tsx @@ -5,6 +5,7 @@ import { Slider as SliderComponent } from './Slider'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Slider', component: SliderComponent, }; diff --git a/lib/components/Switch/Switch.stories.tsx b/lib/components/Switch/Switch.stories.tsx index e245a2c..a810020 100644 --- a/lib/components/Switch/Switch.stories.tsx +++ b/lib/components/Switch/Switch.stories.tsx @@ -5,6 +5,7 @@ import { Switch as SwitchComponent } from './Switch'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Switch', component: SwitchComponent, }; diff --git a/lib/components/Tag/Tag.stories.tsx b/lib/components/Tag/Tag.stories.tsx index f3b1b78..d30e973 100644 --- a/lib/components/Tag/Tag.stories.tsx +++ b/lib/components/Tag/Tag.stories.tsx @@ -5,6 +5,7 @@ import { Tag as TagComponent } from './Tag'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Tag', component: TagComponent, }; diff --git a/lib/components/TagSelect/TagSelect.stories.tsx b/lib/components/TagSelect/TagSelect.stories.tsx index 5c0123a..c2ed85b 100644 --- a/lib/components/TagSelect/TagSelect.stories.tsx +++ b/lib/components/TagSelect/TagSelect.stories.tsx @@ -5,6 +5,7 @@ import { TagSelect as TagSelectComponent } from './TagSelect'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/TagSelect', component: TagSelectComponent, }; diff --git a/lib/components/TextArea/TextArea.stories.tsx b/lib/components/TextArea/TextArea.stories.tsx index fe5adc2..d892833 100644 --- a/lib/components/TextArea/TextArea.stories.tsx +++ b/lib/components/TextArea/TextArea.stories.tsx @@ -5,6 +5,7 @@ import { TextArea as TextAreaComponent } from './TextArea'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/TextArea', component: TextAreaComponent, }; diff --git a/lib/components/Toast/Toast.stories.tsx b/lib/components/Toast/Toast.stories.tsx index f945229..4498f9f 100644 --- a/lib/components/Toast/Toast.stories.tsx +++ b/lib/components/Toast/Toast.stories.tsx @@ -8,6 +8,7 @@ import { Toast as ToastComponent } from './Toast'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Toast', component: ToastComponent, }; diff --git a/lib/components/Tooltip/Tooltip.stories.tsx b/lib/components/Tooltip/Tooltip.stories.tsx index da0e0cd..e8000bb 100644 --- a/lib/components/Tooltip/Tooltip.stories.tsx +++ b/lib/components/Tooltip/Tooltip.stories.tsx @@ -8,6 +8,7 @@ import { ThemeProvider } from '../../contexts'; type Story = StoryObj; const meta: Meta = { + title: 'Design System/Tooltip', component: TooltipComponent, }; diff --git a/package-lock.json b/package-lock.json index 5e56e37..a541281 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@konstructio/ui", - "version": "0.0.2", + "version": "0.0.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@konstructio/ui", - "version": "0.0.2", + "version": "0.0.3", "license": "MIT", "dependencies": { "@radix-ui/react-alert-dialog": "^1.1.4", @@ -27,6 +27,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", diff --git a/package.json b/package.json index 90cc522..613c25a 100644 --- a/package.json +++ b/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",