feat: allow to use tailwindconf inside componenent

build/package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@esbuild-kit/cjs-loader": "^2.4.2",
     "@pnpm/types": "^9.0.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@types/rollup-plugin-css-only": "^3.1.0",
     "unbuild": "^1.2.0",
     "vue": "^3.2.47"

build/src/tasks/full-bundle.ts

@@ -8,6 +8,7 @@ import esbuild from 'rollup-plugin-esbuild'
 import { parallel } from 'gulp'
 import glob from 'fast-glob'
 import { camelCase, upperFirst } from 'lodash-unified'
+import json from '@rollup/plugin-json'
 import { version } from '../../../packages/puik/version'
 import { PuikAlias } from '../plugins/puik-alias'
 import {
@@ -48,6 +49,7 @@ async function buildFullEntry(minify: boolean) {
           'process.env.NODE_ENV': JSON.stringify('production'),
         },
       }),
+      json(),
     ],
     external: await generateExternal({ full: true }),
   })
@@ -97,6 +99,7 @@ async function buildFullLocale(minify: boolean) {
             sourceMap: minify,
             target,
           }),
+          json(),
         ],
       })
       await writeBundles(bundle, [

build/src/tasks/modules.ts

@@ -5,6 +5,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import esbuild from 'rollup-plugin-esbuild'
 import glob from 'fast-glob'
+import json from '@rollup/plugin-json'
 import {
   puikRoot,
   pkgRoot,
@@ -44,6 +45,7 @@ export const buildModules = async () => {
           '.vue': 'ts',
         },
       }),
+      json(),
     ],
     external: await generateExternal({ full: false }),
     treeshake: false,

packages/components/icon/stories/icon.stories.ts

@@ -34,6 +34,12 @@ export default {
     dataTest: {
       description: 'Set the data-test attribute',
     },
+    isDisabled: {
+      description: 'If the icon is disable',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 } as Meta
 
@@ -56,6 +62,7 @@ export const Default = {
     fontSize: 24,
     nodeType: 'span',
     dataTest: '',
+    isDisabled: false,
   },
 
   parameters: {

packages/puik/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext"
+  }
+}

packages/tailwind-preset/index.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const Puiktheme = require('./theme')
+// const Puiktheme = require('./theme')
+import PuikTheme from './theme'
 
-module.exports = {
-  theme: Puiktheme,
+export default {
+  theme: PuikTheme,
 }

packages/theme/tailwind.config.js

@@ -1,6 +1,8 @@
+import tailwindConfig from '@puik/tailwind-preset'
+
 /* eslint-disable @typescript-eslint/no-var-requires */
 module.exports = {
-  presets: [require('@puik/tailwind-preset')],
+  presets: [tailwindConfig],
   content: ['./src/**/*.scss'],
   plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
   darkMode: 'class', // To remove if we wanna use the css' prefers-color-scheme feature (dark mode based on OS/browser preference)