Add ui-informed package (#8)

* Copy `ui` package into `ui-informed`

* Clear configs and `package.json` and add very basic control with storybook

* Improve initial clean ui-informed after review

* Fix build

packages/ui-informed/.npmignore

@@ -0,0 +1,3 @@
+*
+!dist/**/*
+!package.json

packages/ui-informed/.storybook/main.ts

@@ -0,0 +1,36 @@
+import path from 'path';
+
+import type { StorybookConfig } from '@storybook/react-vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return path.dirname(require.resolve(path.join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  viteFinal: async config => {
+    config.plugins?.push(tsconfigPaths());
+
+    return config;
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite') as any,
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+
+export default config;

packages/ui-informed/.storybook/preview.css

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

packages/ui-informed/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import { type Preview } from '@storybook/react';
+import './preview.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/ui-informed/CHANGELOG.md

@@ -0,0 +1 @@
+# @utima/ui-informed

packages/ui-informed/README.md

@@ -0,0 +1,7 @@
+# @utima/ui-informed
+
+Combination of components from Utima/ui and form library Informed.
+
+# Development
+
+For this package to be working locally for you, you need to have have @utima/ui package built.

packages/ui-informed/eslint.config.mjs

@@ -0,0 +1,9 @@
+import baseConfig from '@utima/eslint-config';
+
+export default [
+  {
+    // FIXME - typescript eslint not working here
+    ignores: ['**/.storybook/**'],
+  },
+  ...baseConfig,
+];

packages/ui-informed/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@utima/ui-informed",
+  "version": "0.0.0",
+  "description": "Utima UI-Informed based on Utima UI and form library Informed with support for Zod validations.",
+  "sideEffects": false,
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/src/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "lint": "ESLINT_USE_FLAT_CONFIG=true eslint -c ./eslint.config.mjs './**/*.{js,ts,jsx,tsx,cjs,mjs}'",
+    "lint:fix": "npm run lint -- --fix",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "npm run build; storybook build"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/cjs/index.js"
+    }
+  },
+  "keywords": [
+    "utima",
+    "ui",
+    "informed",
+    "radix",
+    "shadcn",
+    "react",
+    "zod",
+    "validation",
+    "form",
+    "form-library",
+    "component",
+    "library",
+    "components"
+  ],
+  "author": "Matúš Hlaváčik",
+  "license": "MIT",
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.16",
+    "@storybook/addon-interactions": "^7.6.16",
+    "@storybook/addon-links": "^7.6.16",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/react": "^7.6.16",
+    "@storybook/react-vite": "^7.6.16",
+    "@utima/ui": "^0.16.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.16",
+    "tailwindcss": "^3.4.1",
+    "vite-tsconfig-paths": "^4.3.1"
+  },
+  "peerDependencies": {
+    "@utima/ui": "^0.16.2",
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

packages/ui-informed/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/ui-informed/rollup.config.mjs

@@ -0,0 +1,33 @@
+import { nodeExternals } from 'rollup-plugin-node-externals';
+import typescript from 'rollup-plugin-typescript2';
+
+/**
+ * @type {import('rollup').RollupOptions[]}
+ */
+export default [
+  {
+    input: `src/index.ts`,
+    plugins: [
+      nodeExternals(),
+      typescript({
+        rollupCommonJSResolveHack: false,
+        useTsconfigDeclarationDir: true,
+        tsconfig: 'tsconfig.build.json',
+      }),
+    ],
+    output: [
+      {
+        dir: './dist/esm',
+        format: 'es',
+        sourcemap: true,
+        preserveModules: true,
+      },
+      {
+        dir: './dist/cjs',
+        format: 'cjs',
+        sourcemap: true,
+        preserveModules: true,
+      },
+    ],
+  },
+];

packages/ui-informed/src/controls/InputControl.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InputControl } from './InputControl';
+
+const meta: Meta<typeof InputControl> = {
+  component: InputControl,
+  tags: ['autodocs'],
+  title: 'Controls/InputControl',
+  args: {
+    name: 'Name',
+    placeholder: 'Placeholder',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputControl>;
+
+export const Basic: Story = {
+  args: {},
+};

packages/ui-informed/src/controls/InputControl.tsx

@@ -0,0 +1,8 @@
+import { Input, type InputProps } from '@utima/ui';
+
+/**
+ * Input component that is just returning siple Input component from @utima/ui
+ */
+export function InputControl({ type = 'text', ...restProps }: InputProps) {
+  return <Input variant='default' type={type} {...restProps} />;
+}

packages/ui-informed/src/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Controls
+ */
+export { InputControl } from './controls/InputControl';

packages/ui-informed/tailwind.config.js

@@ -0,0 +1,16 @@
+import path from 'node:path';
+
+import utimaUi from '@utima/ui/plugin';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    `${path.dirname(require.resolve('@utima/ui'))}/**/*.js`,
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [utimaUi()],
+};

packages/ui-informed/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "dist",
+  },
+  "exclude": [
+    "**/__tests__/*",
+  ]
+}

packages/ui-informed/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../../tsconfig.lib.json",
+  "compilerOptions": {
+    "target": "ES2018",
+    "lib": [
+      "ES2018",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+    },
+  },
+  "include": [
+    "src",
+    "plugin.d.ts"
+  ],
+  "exclude": [
+    "**/.*/",
+    "**/node_modules/**",
+    "**/dist/**"
+  ],
+}

packages/ui/package.json

@@ -56,7 +56,6 @@
     "@storybook/react-vite": "^7.6.16",
     "@storybook/test": "^7.6.16",
     "@types/lodash.get": "^4.4.9",
-    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.6.16",