feat(tooling-ui): add configs necessary for the package (#953)

* feat(ui): kickoff

* feat(ui): update package name

* feat(ui): update headers

* refactor: move folders around and add aliases

* fix: cleanup exports field in package.json

* fix: update alias import to use "@"

* fix: manypkg check

* feat: add configs necessary for the package

* fix: update styles import

* fix(tooling-ui): linter

* refactor!: rename folder

* refactor: rename missing strings

* fix!: revert and update lockfile

* refactor: update tsconfig and use a different file for package compilation

* manypkg fix

* fix: formatting

* feat: add enums alias to tsconfig

---------

Co-authored-by: evavirseda <[email protected]>
Co-authored-by: cpl121 <[email protected]>
Co-authored-by: cpl121 <[email protected]>
Co-authored-by: Bran <[email protected]>
Co-authored-by: Marc Espin <[email protected]>

apps/ui-kit/package.json

@@ -1,12 +1,14 @@
 {
     "name": "@iota/apps-ui-kit",
-    "private": true,
-    "sideEffects": false,
+    "version": "0.0.1-rc.1",
     "repository": {
         "type": "git",
         "url": "github.com:iotaledger/iota.git"
     },
     "license": "Apache-2.0",
+    "files": [
+        "dist"
+    ],
     "scripts": {
         "prettier:check": "prettier -c --ignore-unknown .",
         "prettier:fix": "prettier -w --ignore-unknown .",
@@ -16,11 +18,21 @@
         "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
+        "build": "tsc --project tsconfig.package.json && vite build",
         "dev": "pnpm run storybook"
     },
+    "exports": {
+        ".": {
+            "import": "./dist/index.es.js",
+            "require": "./dist/index.umd.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./styles": "./dist/style.css"
+    },
     "dependencies": {
         "@iota/core": "workspace:*",
         "@iota/icons": "workspace:*",
+        "lodash.merge": "^4.6.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },
@@ -34,11 +46,17 @@
         "@storybook/react": "^7.1.0",
         "@storybook/react-vite": "^7.1.0",
         "@storybook/test": "^8.1.11",
+        "@types/lodash.merge": "^4.6.9",
+        "@types/node": "^20.4.2",
         "@types/react": "^18.2.15",
+        "@vitejs/plugin-react-swc": "^3.3.2",
+        "autoprefixer": "^10.4.14",
+        "postcss": "^8.4.31",
         "storybook": "^7.1.0",
         "tailwindcss": "^3.3.3",
         "typescript": "^5.3.3",
         "vite": "^4.4.4",
+        "vite-plugin-dts": "^3.9.1",
         "vite-tsconfig-paths": "^4.2.0"
     }
 }

apps/ui-kit/src/lib/components/Button.tsx

@@ -8,5 +8,5 @@ export interface ButtonProps {
 }
 
 export function Button({ label }: ButtonProps): React.JSX.Element {
-    return <button className="p-2 border rounded-full border-blue-500">{label}</button>;
+    return <button className="rounded-full border border-blue-500 p-2">{label}</button>;
 }

apps/ui-kit/src/lib/components/index.ts

@@ -1,4 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import '../styles/index.css';
+
 export * from './Button';

apps/ui-kit/src/lib/enums/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './screenSize.enum';

apps/ui-kit/src/lib/enums/screenSize.enum.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ScreenSize {
+    Sm = 'sm',
+    Md = 'md',
+    Lg = 'lg',
+    Xl = 'xl',
+}

apps/ui-kit/src/lib/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './tailwind';
+export * from './components';
+export * from './enums';

apps/ui-kit/src/lib/styles/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/ui-kit/src/lib/tailwind/base.preset.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Config } from 'tailwindcss';
+
+export const BASE_CONFIG: Partial<Config> = {
+    content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+    plugins: [],
+};

apps/ui-kit/src/lib/tailwind/helpers.ts

@@ -0,0 +1,20 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ScreenSize } from '../enums';
+
+export const pxToRem = (px: number, base: number = 16) => `${px / base}rem`;
+
+export function getTailwindScreens(
+    breakpoints: Partial<Record<ScreenSize, number>>,
+): Record<string, string> {
+    const screens: Record<string, string> = Object.entries(breakpoints).reduce(
+        (acc, [key, value]) => {
+            acc[key] = `${value}px`;
+            return acc;
+        },
+        {} as Record<string, string>,
+    );
+
+    return screens;
+}

apps/ui-kit/src/lib/tailwind/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { default as uiKitResponsivePreset } from './responsive.preset';
+export { default as uiKitStaticPreset } from './static.preset';

apps/ui-kit/src/lib/tailwind/responsive.preset.ts

@@ -0,0 +1,36 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Config } from 'tailwindcss';
+import type { ScreenBreakpoints } from './types';
+import { ScreenSize } from '../enums';
+import { getTailwindScreens, pxToRem } from './helpers';
+import { BASE_CONFIG } from './base.preset';
+import merge from 'lodash.merge';
+
+const BREAKPOINTS: ScreenBreakpoints = {
+    [ScreenSize.Sm]: 768,
+    [ScreenSize.Md]: 1024,
+    [ScreenSize.Lg]: 1400,
+    [ScreenSize.Xl]: 1920,
+};
+
+const screens = getTailwindScreens(BREAKPOINTS);
+
+const responsivePreset: Partial<Config> = merge({}, BASE_CONFIG, {
+    theme: {
+        screens,
+        container: {
+            center: true,
+            screens,
+            padding: {
+                DEFAULT: pxToRem(24),
+                md: pxToRem(48),
+                lg: pxToRem(120),
+                xl: pxToRem(240),
+            },
+        },
+    },
+});
+
+export default responsivePreset;

apps/ui-kit/src/lib/tailwind/static.preset.ts

@@ -0,0 +1,25 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Config } from 'tailwindcss';
+import type { ScreenBreakpoints } from './types';
+import { getTailwindScreens } from './helpers';
+import { BASE_CONFIG } from './base.preset';
+import merge from 'lodash.merge';
+
+const BREAKPOINTS: Partial<ScreenBreakpoints> & { default: number } = {
+    default: 0,
+};
+
+const screens = getTailwindScreens(BREAKPOINTS);
+
+const staticPreset: Partial<Config> = merge({}, BASE_CONFIG, {
+    theme: {
+        screens,
+    },
+    corePlugins: {
+        container: false,
+    },
+} satisfies Partial<Config>);
+
+export default staticPreset;

apps/ui-kit/src/lib/tailwind/types.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ScreenSize } from '../enums';
+
+export type ScreenBreakpoints = Record<ScreenSize, number>;

apps/ui-kit/src/stories/Button.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
     tags: ['autodocs'],
     render: (props) => {
         return (
-            <div className="flex flex-col gap-2 items-start">
+            <div className="flex flex-col items-start gap-2">
                 <Button {...props}>Primary</Button>
             </div>
         );

apps/ui-kit/tailwind.config.ts

@@ -1,9 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import preset from '@iota/core/tailwind.config';
-import { type Config } from 'tailwindcss';
+import preset from './src/lib/tailwind/responsive.preset';
 
-export default {
-    presets: [preset],
-} satisfies Partial<Config>;
+export default preset;

apps/ui-kit/tsconfig.base.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "es2020",
+        "module": "esnext",
+        "skipLibCheck": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noFallthroughCasesInSwitch": true,
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "noEmit": true,
+        "isolatedModules": true,
+        "sourceMap": true,
+        "jsx": "react-jsx",
+        "paths": {
+            "@/*": ["./src/*"],
+            "@/components": ["./src/lib/components"],
+            "@/components/*": ["./src/lib/components/*"],
+            "@/enums": ["./src/lib/enums"],
+            "@/enums/*": ["./src/lib/enums/*"]
+        }
+    }
+}

apps/ui-kit/tsconfig.json

@@ -1,25 +1,5 @@
 {
-    "compilerOptions": {
-        "target": "es2020",
-        "module": "esnext",
-        "skipLibCheck": true,
-        "allowSyntheticDefaultImports": true,
-        "esModuleInterop": true,
-        "forceConsistentCasingInFileNames": true,
-        "strict": true,
-        "noFallthroughCasesInSwitch": true,
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "noEmit": true,
-        "isolatedModules": true,
-        "sourceMap": true,
-        "jsx": "react-jsx",
-        "paths": {
-            "@/*": ["./src/*"],
-            "@/components": ["./src/lib/components"],
-            "@/components/*": ["./src/lib/components/*"]
-        }
-    },
+    "extends": "./tsconfig.base.json",
     "include": ["src"],
     "exclude": ["node_modules"]
 }

apps/ui-kit/tsconfig.package.json

@@ -0,0 +1,5 @@
+{
+    "extends": "./tsconfig.base.json",
+    "include": ["src/lib"],
+    "exclude": ["node_modules"]
+}

apps/ui-kit/vite.config.ts

@@ -1,10 +1,40 @@
 import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import dts from 'vite-plugin-dts';
+import tailwindcss from 'tailwindcss';
 
 export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, './src/lib/index.ts'),
+            name: '@iota/apps-ui-kit',
+            fileName: (format) => `index.${format}.js`,
+        },
+        rollupOptions: {
+            external: ['react', 'react-dom', 'tailwindcss'],
+            output: {
+                globals: {
+                    react: 'React',
+                    'react-dom': 'ReactDOM',
+                    tailwindcss: 'tailwindcss',
+                },
+            },
+        },
+        sourcemap: true,
+        emptyOutDir: true,
+    },
     plugins: [
         tsconfigPaths({
             root: __dirname,
         }),
+        react(),
+        dts({ rollupTypes: true }),
     ],
+    css: {
+        postcss: {
+            plugins: [tailwindcss],
+        },
+    },
 });