✨ Add ui package (#40)

packages/ui/.eslintrc.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    jsx: true,
+  },
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['*.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+}

packages/ui/.storybook/main.ts

@@ -0,0 +1,15 @@
+import type {StorybookConfig} from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: [],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+
+export default config

packages/ui/.storybook/preview.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

packages/ui/.storybook/preview.tsx

@@ -0,0 +1,6 @@
+import type {Preview} from '@storybook/react'
+import './preview.css'
+
+const preview: Preview = {}
+
+export default preview

packages/ui/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@cloudwalker/ui",
+  "version": "0.0.0",
+  "scripts": {
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx --report-unused-disable-directives .",
+    "panda:codegen": "panda codegen",
+    "prepare": "pnpm panda:codegen",
+    "build": "tsup",
+    "stories": "storybook dev -p 6006"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs"
+    },
+    "./panda": {
+      "types": "./dist/panda.preset.d.ts",
+      "import": "./dist/panda.preset.js",
+      "require": "./dist/panda.preset.cjs"
+    }
+  },
+  "devDependencies": {
+    "@pandacss/dev": "^0.4.0",
+    "@pandacss/types": "^0.4.0",
+    "@storybook/react": "^7.0.23",
+    "@storybook/react-vite": "^7.0.23",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "eslint": "^8.43.0",
+    "eslint-plugin-react": "^7.32.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.23",
+    "tsup": "^7.1.0"
+  }
+}

packages/ui/panda.config.ts

@@ -0,0 +1,11 @@
+import {defineConfig} from '@pandacss/dev'
+import {preset} from './src/panda.preset'
+
+export default defineConfig({
+  presets: [preset],
+  include: ['src/**/*.{ts,tsx,mdx}'],
+
+  outdir: '@cloudwalker/styled-system',
+  strictTokens: true,
+  emitPackage: true,
+})

packages/ui/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}

packages/ui/src/main.ts

@@ -0,0 +1 @@
+export * from './primitives'

packages/ui/src/panda.preset.ts

@@ -0,0 +1,13 @@
+import {definePreset} from '@pandacss/dev'
+import type {Preset} from '@pandacss/types'
+
+export const preset = definePreset({
+  theme: {
+    tokens: {
+      colors: {
+        primary: {value: 'red'},
+        secondary: {value: 'green'},
+      },
+    },
+  },
+}) as Preset

packages/ui/src/panda.ts

@@ -0,0 +1,4 @@
+export const arbitraryValue = (value: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return value as any
+}

packages/ui/src/primitives/Button/Button.stories.tsx

@@ -0,0 +1,13 @@
+import {Meta, StoryObj} from '@storybook/react'
+
+import {Button} from './Button'
+
+const meta: Meta = {
+  component: Button,
+}
+
+export default meta
+
+export const Base: StoryObj = {
+  render: () => <Button>asd</Button>,
+}

packages/ui/src/primitives/Button/Button.tsx

@@ -0,0 +1,18 @@
+import {css, cx} from '@cloudwalker/styled-system/css'
+import {ButtonHTMLAttributes, createElement, forwardRef} from 'react'
+
+import {arbitraryValue} from '../../panda'
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>(function Button(props, ref) {
+  return createElement('button', {
+    ref,
+    className: cx(
+      props.className,
+      css({bg: 'primary', color: arbitraryValue('white')}),
+    ),
+    ...props,
+  })
+})

packages/ui/src/primitives/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button'

packages/ui/src/primitives/index.ts

@@ -0,0 +1 @@
+export * from './Button'

packages/ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "Node"
+  }
+}

packages/ui/tsup.config.ts

@@ -0,0 +1,10 @@
+import {defineConfig} from 'tsup'
+
+export default defineConfig({
+  external: ['@cloudwalker/styled-system'],
+  format: ['cjs', 'esm'],
+  entry: ['src/main.ts', 'src/panda.preset.ts'],
+  dts: true,
+  minify: true,
+  sourcemap: true,
+})