feat: add publint + semantic releases

.github/workflows/ui-release.yml

@@ -0,0 +1,50 @@
+name: UI Release
+
+on:
+  push:
+    branches:
+      - master
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false  # Important when using custom GH_TOKEN
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          registry-url: https://registry.npmjs.org
+          scope: '@techsio'
+
+      - name: Update npm (trusted publishing needs >= 11.5.1)
+        run: npm install -g npm@latest
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build UI package
+        run: pnpm -C libs/ui build
+
+      - name: Run semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}  # Remove after first publish + trusted publisher setup
+        run: pnpm -C libs/ui semantic-release

.gitignore

@@ -69,3 +69,4 @@ apps/frontend-demo/public/data/
 static-data/
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+.code

apps/frontend-demo/package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@medusajs/js-sdk": "2.6.1",
     "@medusajs/types": "^2.8.4",
-    "@new-engine/ui": "workspace:*",
+    "@techsio/ui-kit": "workspace:*",
     "@react-email/components": "^0.3.2",
     "@tanstack/react-query": "^5.90.10",
     "@tanstack/react-store": "^0.8.0",

apps/frontend-demo/src/app/about/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 import { StatsSection } from '@/components/stats-section'
 import { aboutContent } from '@/data/about-content'
-import { Icon } from '@new-engine/ui/atoms/icon'
-import { slugify } from '@new-engine/ui/utils'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
+import { slugify } from '@techsio/ui-kit/utils'
 import Image from 'next/image'
 import aboutImage from '/assets/hero/about.webp'
 

apps/frontend-demo/src/app/account/layout.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useAuth } from '@/hooks/use-auth'
-import { Button } from '@new-engine/ui/atoms/button'
-import { Icon } from '@new-engine/ui/atoms/icon'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import type { ReactNode } from 'react'

apps/frontend-demo/src/app/account/orders/[id]/page.tsx

@@ -11,10 +11,10 @@ import {
 } from '@/lib/order-utils'
 import { queryKeys } from '@/lib/query-keys'
 import type { Order } from '@/types/order'
-import { Badge } from '@new-engine/ui/atoms/badge'
-import { Button } from '@new-engine/ui/atoms/button'
-import { Icon } from '@new-engine/ui/atoms/icon'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
+import { Badge } from '@techsio/ui-kit/atoms/badge'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import Image from 'next/image'
 import Link from 'next/link'

apps/frontend-demo/src/app/checkout/page.tsx

@@ -7,9 +7,9 @@ import { useCheckout } from '@/hooks/use-checkout'
 import { PAYMENT_METHODS } from '@/lib/checkout-data'
 import { formatPrice } from '@/lib/format-price'
 import { orderHelpers } from '@/stores/order-store'
-import { Button } from '@new-engine/ui/atoms/button'
-import { Icon } from '@new-engine/ui/atoms/icon'
-import { Steps } from '@new-engine/ui/molecules/steps'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
+import { Steps } from '@techsio/ui-kit/molecules/steps'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { PaymentSelection } from '../../components/molecules/payment-selection'

apps/frontend-demo/src/app/contact/page.tsx

@@ -1,12 +1,12 @@
 'use client'
 import { contactContent } from '@/data/contact-content'
 import { useContactForm } from '@/hooks/use-contact-form'
-import { Button } from '@new-engine/ui/atoms/button'
-import { Icon, type IconType } from '@new-engine/ui/atoms/icon'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
-import { FormInput } from '@new-engine/ui/molecules/form-input'
-import { FormTextarea } from '@new-engine/ui/molecules/form-textarea'
-import { Select } from '@new-engine/ui/molecules/select'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { Icon, type IconType } from '@techsio/ui-kit/atoms/icon'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
+import { FormInput } from '@techsio/ui-kit/molecules/form-input'
+import { FormTextarea } from '@techsio/ui-kit/molecules/form-textarea'
+import { Select } from '@techsio/ui-kit/molecules/select'
 import Image from 'next/image'
 import contactImage from '/assets/hero/contact.webp'
 

apps/frontend-demo/src/app/faq/page.tsx

@@ -1,11 +1,11 @@
 'use client'
 import { FaqItemHeader } from '@/components/faq/faq-item-header'
-import { Icon } from '@new-engine/ui/atoms/icon'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
 import {
   Accordion,
   type AccordionItem,
-} from '@new-engine/ui/molecules/accordion'
+} from '@techsio/ui-kit/molecules/accordion'
 
 const faqData: AccordionItem[] = [
   {

apps/frontend-demo/src/app/products/[handle]/product-detail.tsx

@@ -9,8 +9,8 @@ import { useProduct, useProducts } from '@/hooks/use-products'
 import { useRegions } from '@/hooks/use-region'
 import { truncateProductTitle } from '@/lib/order-utils'
 import { formatPrice } from '@/utils/price-utils'
-import { ErrorText } from '@new-engine/ui/atoms/error-text'
-import { Breadcrumb } from '@new-engine/ui/molecules/breadcrumb'
+import { ErrorText } from '@techsio/ui-kit/atoms/error-text'
+import { Breadcrumb } from '@techsio/ui-kit/molecules/breadcrumb'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 

apps/frontend-demo/src/app/products/page.tsx

@@ -7,9 +7,9 @@ import { usePrefetchPages } from '@/hooks/use-prefetch-pages'
 import { useProducts } from '@/hooks/use-products'
 import { useRegions } from '@/hooks/use-region'
 import { useUrlFilters } from '@/hooks/use-url-filters'
-import { Button } from '@new-engine/ui/atoms/button'
-import { Breadcrumb } from '@new-engine/ui/molecules/breadcrumb'
-import { Select } from '@new-engine/ui/molecules/select'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { Breadcrumb } from '@techsio/ui-kit/molecules/breadcrumb'
+import { Select } from '@techsio/ui-kit/molecules/select'
 import Link from 'next/link'
 import { Suspense, useEffect, useRef } from 'react'
 

apps/frontend-demo/src/components/account/desktop-order-card.tsx

@@ -5,8 +5,8 @@ import {
   truncateProductTitle,
 } from '@/lib/order-utils'
 import type { StoreOrder } from '@medusajs/types'
-import { Badge } from '@new-engine/ui/atoms/badge'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
+import { Badge } from '@techsio/ui-kit/atoms/badge'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
 import Image from 'next/image'
 import Link from 'next/link'
 

apps/frontend-demo/src/components/account/mobile-order-card.tsx

@@ -5,9 +5,9 @@ import {
   truncateProductTitle,
 } from '@/lib/order-utils'
 import type { StoreOrder } from '@medusajs/types'
-import { Badge } from '@new-engine/ui/atoms/badge'
-import { Icon } from '@new-engine/ui/atoms/icon'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
+import { Badge } from '@techsio/ui-kit/atoms/badge'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
 import Image from 'next/image'
 import Link from 'next/link'
 

apps/frontend-demo/src/components/account/orders-empty.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@new-engine/ui/atoms/icon'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
 import Link from 'next/link'
 
 export function OrdersEmpty() {

apps/frontend-demo/src/components/account/orders-error.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@new-engine/ui/atoms/button'
+import { Button } from '@techsio/ui-kit/atoms/button'
 
 export function OrdersError() {
   return (

apps/frontend-demo/src/components/account/orders-summary.tsx

@@ -1,5 +1,5 @@
 import { formatPrice } from '@/lib/format-price'
-import { Icon } from '@new-engine/ui/atoms/icon'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
 
 interface OrdersSummaryProps {
   totalAmount: number

apps/frontend-demo/src/components/atoms/color-select.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@new-engine/ui/atoms/button'
-import { tv } from '@new-engine/ui/utils'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { tv } from '@techsio/ui-kit/utils'
 import type { ButtonHTMLAttributes } from 'react'
 import type { VariantProps } from 'tailwind-variants'
 

apps/frontend-demo/src/components/atoms/skeleton-loader.tsx

@@ -1,4 +1,4 @@
-import { tv } from '@new-engine/ui/utils'
+import { tv } from '@techsio/ui-kit/utils'
 import type * as React from 'react'
 import type { VariantProps } from 'tailwind-variants'
 

apps/frontend-demo/src/components/auth/auth-dropdown.tsx

@@ -1,11 +1,11 @@
 'use client'
 import { useAuth } from '@/hooks/use-auth'
 import { authFormFields, getAuthErrorMessage, withLoading } from '@/lib/auth'
-import { Button } from '@new-engine/ui/atoms/button'
-import { Icon } from '@new-engine/ui/atoms/icon'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
-import { FormInput } from '@new-engine/ui/molecules/form-input'
-import { Popover } from '@new-engine/ui/molecules/popover'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
+import { FormInput } from '@techsio/ui-kit/molecules/form-input'
+import { Popover } from '@techsio/ui-kit/molecules/popover'
 import Link from 'next/link'
 import { type FormEvent, useState } from 'react'
 

apps/frontend-demo/src/components/auth/login-form.tsx

@@ -7,10 +7,10 @@ import {
   validateEmail,
   withLoading,
 } from '@/lib/auth'
-import { Button } from '@new-engine/ui/atoms/button'
-import { ErrorText } from '@new-engine/ui/atoms/error-text'
-import { Checkbox } from '@new-engine/ui/molecules/checkbox'
-import { FormInput } from '@new-engine/ui/molecules/form-input'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { ErrorText } from '@techsio/ui-kit/atoms/error-text'
+import { Checkbox } from '@techsio/ui-kit/molecules/checkbox'
+import { FormInput } from '@techsio/ui-kit/molecules/form-input'
 import Link from 'next/link'
 import { type FormEvent, useState } from 'react'
 import { AuthFormWrapper } from './auth-form-wrapper'

apps/frontend-demo/src/components/auth/register-form.tsx

@@ -8,10 +8,10 @@ import {
   validatePassword,
   withLoading,
 } from '@/lib/auth'
-import { Button } from '@new-engine/ui/atoms/button'
-import { ErrorText } from '@new-engine/ui/atoms/error-text'
-import { Checkbox } from '@new-engine/ui/molecules/checkbox'
-import { FormInput } from '@new-engine/ui/molecules/form-input'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { ErrorText } from '@techsio/ui-kit/atoms/error-text'
+import { Checkbox } from '@techsio/ui-kit/molecules/checkbox'
+import { FormInput } from '@techsio/ui-kit/molecules/form-input'
 import { type FormEvent, useState } from 'react'
 import { AuthFormWrapper } from './auth-form-wrapper'
 import { PasswordRequirements } from './password-requirements'

apps/frontend-demo/src/components/cart/cart-summary.tsx

@@ -1,5 +1,5 @@
 import { formatPrice } from '@/utils/price-utils'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
 import Link from 'next/link'
 
 interface CartSummaryProps {

apps/frontend-demo/src/components/cart/empty-cart.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@new-engine/ui/atoms/icon'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
 import Link from 'next/link'
 
 export function EmptyCart() {

apps/frontend-demo/src/components/category-tree-filter.tsx

@@ -8,7 +8,7 @@ import {
   getLeafIdsForCategory,
   isSelectableCategory,
 } from '@/utils/category-tree-helpers'
-import { type TreeNode, TreeView } from '@new-engine/ui/molecules/tree-view'
+import { type TreeNode, TreeView } from '@techsio/ui-kit/molecules/tree-view'
 import { useCallback, useMemo, useState } from 'react'
 
 interface CategoryFilterProps {

apps/frontend-demo/src/components/disclaimer-wrapper.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Button } from '@new-engine/ui/atoms/button'
+import { Button } from '@techsio/ui-kit/atoms/button'
 import { useEffect, useState } from 'react'
 import { Disclaimer } from './disclaimer'
 

apps/frontend-demo/src/components/disclaimer.tsx

@@ -1,5 +1,5 @@
-import { Icon, type IconType } from '@new-engine/ui/atoms/icon'
-import { tv } from '@new-engine/ui/utils'
+import { Icon, type IconType } from '@techsio/ui-kit/atoms/icon'
+import { tv } from '@techsio/ui-kit/utils'
 import type { HTMLAttributes } from 'react'
 import type { VariantProps } from 'tailwind-variants'
 

apps/frontend-demo/src/components/faq/faq-item-header.tsx

@@ -1,4 +1,4 @@
-import { Icon, type IconType } from '@new-engine/ui/atoms/icon'
+import { Icon, type IconType } from '@techsio/ui-kit/atoms/icon'
 
 interface FaqItemHeaderProps {
   icon: IconType

apps/frontend-demo/src/components/footer.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { NavSection } from '@/types/navigation'
 import { handleFormSubmit } from '@/utils/form-utils'
-import { Button } from '@new-engine/ui/atoms/button'
-import { Input } from '@new-engine/ui/atoms/input'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { Input } from '@techsio/ui-kit/atoms/input'
 import Link from 'next/link'
 import type { FormEvent } from 'react'
 

apps/frontend-demo/src/components/header-wrapper.tsx

@@ -3,7 +3,7 @@
 import { Header } from '@/components/header'
 import type { NavItem } from '@/components/molecules/navigation'
 import { getCategoryIdsByHandles } from '@/utils/category-helpers'
-import type { IconType } from '@new-engine/ui/atoms/icon'
+import type { IconType } from '@techsio/ui-kit/atoms/icon'
 
 interface HeaderWrapperProps {
   logo: {

apps/frontend-demo/src/components/header.tsx

@@ -1,9 +1,9 @@
 'use client'
 import { useCart } from '@/hooks/use-cart'
-import { Badge } from '@new-engine/ui/atoms/badge'
-import { Button } from '@new-engine/ui/atoms/button'
-import { Icon, type IconType } from '@new-engine/ui/atoms/icon'
-import { Popover } from '@new-engine/ui/molecules/popover'
+import { Badge } from '@techsio/ui-kit/atoms/badge'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { Icon, type IconType } from '@techsio/ui-kit/atoms/icon'
+import { Popover } from '@techsio/ui-kit/molecules/popover'
 import Link from 'next/link'
 import { type ComponentPropsWithoutRef, type ReactNode, useState } from 'react'
 import { Logo } from './atoms/logo'

apps/frontend-demo/src/components/molecules/cart-preview.tsx

@@ -4,8 +4,8 @@ import { useCart } from '@/hooks/use-cart'
 import { getVariantInventory, isQuantityAvailable } from '@/lib/inventory'
 import { formatPrice } from '@/utils/price-utils'
 import { getProductPath } from '@/utils/product-utils'
-import { Button } from '@new-engine/ui/atoms/button'
-import { LinkButton } from '@new-engine/ui/atoms/link-button'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { LinkButton } from '@techsio/ui-kit/atoms/link-button'
 import Image from 'next/image'
 import Link from 'next/link'
 

apps/frontend-demo/src/components/molecules/credit-card-dialog.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { Button } from '@new-engine/ui/atoms/button'
-import { ErrorText } from '@new-engine/ui/atoms/error-text'
-import { Dialog } from '@new-engine/ui/molecules/dialog'
-import { FormInputRaw as FormInput } from '@new-engine/ui/molecules/form-input'
+import { Button } from '@techsio/ui-kit/atoms/button'
+import { ErrorText } from '@techsio/ui-kit/atoms/error-text'
+import { Dialog } from '@techsio/ui-kit/molecules/dialog'
+import { FormInputRaw as FormInput } from '@techsio/ui-kit/molecules/form-input'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import '../../tokens/app-components/molecules/_credit-card-dialog.css'
-import { Icon } from '@new-engine/ui/atoms/icon'
+import { Icon } from '@techsio/ui-kit/atoms/icon'
 
 interface CreditCardDialogProps {
   open: boolean