@layers-app/shared 0.1.5 → 0.2.0

package/docs/README.md

@@ -0,0 +1,486 @@
+# @layers-app/shared - Usage Guide
+
+**Version:** 0.2.0
+**Type:** ESM Library for React applications
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @layers-app/shared
+# or
+yarn add @layers-app/shared
+# or
+pnpm add @layers-app/shared
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Import Styles (Required)
+
+Import styles **once** in your application entry point:
+
+```typescript
+// main.tsx or App.tsx
+import '@layers-app/shared/styles';
+```
+
+### 2. Use Components
+
+```typescript
+import {
+  CustomKBD,
+  FilePicker,
+  EmojiPicker,
+  SearchFilters,
+  // ... other components
+} from '@layers-app/shared';
+
+function App() {
+  return (
+    <>
+      <CustomKBD value="Ctrl" />
+      <FilePicker onSelect={(file) => console.log(file)} />
+      <EmojiPicker onSelect={(emoji) => console.log(emoji)} />
+    </>
+  );
+}
+```
+
+---
+
+## 📚 Available Exports
+
+### Components
+- `NoData` - Empty state component
+- `FilePicker` / `FilePickerUpload` - File selection and upload
+- `EmojiPicker` - Emoji selector
+- `AppContainer` - Application container
+- `CustomKBD` - Keyboard key display
+- `SubmitModal` - Submission modal
+- `UserAvatar` - User avatar component
+- `WorkspaceMenu` / `WorkspaceAvatar` - Workspace components
+- `NavbarResizer` - Resizable navbar
+- `ErrorPage` / `ErrorAlert` - Error displays
+- `OnBoarding` - Onboarding flow
+- `ProjectIcon` - Project icon display
+- `ColorPicker` / `ColorPickerPopover` / `NewColorPicker` - Color pickers
+- `AnimationWrapper` - Animation container
+- `SearchFilters` - Search filter components
+- `AttachmentsGalleryModal` - Attachment gallery
+- `ImageModal` - Image modal viewer
+- `Logotype` - Logo component
+- `SortableList` - Drag-and-drop sortable list
+- `ThemeIndicator` - Theme indicator
+- `CommentsPanel` / `CommentComposer` - Comments system
+- `PinModal` - Pin modal
+- `PaymentSuccess` / `PaymentError` / `PaymentCancel` - Payment status pages
+- `StorageUsageProgress` / `StorageUsageEntityList` - Storage components
+- `LanguagePicker` - Language selector
+- `FrontTable` - Table component
+- `CommunitiesDialog` - Communities dialog
+- `NotPublicPanel` - Not public panel
+- `BottomDrawerWithoutHeader` - Bottom drawer
+- `Copyright` - Copyright notice
+- `EntityTitle` - Entity title
+- `CircleColorPicker` - Circle color picker
+- `FormViewer` - Form viewer
+- `BouncingLogo` - Animated logo
+- `CommentFilterMenu` - Comment filter
+- `RemoveConfirmModal` - Confirmation modal
+- `AppSidebarButton` - Sidebar button
+- `NavMenu` - Navigation menu
+- `EntityIcon` - Entity icon
+
+### Helpers
+- `showNotifications` - Show notifications
+- `pickRandomEmoji` - Random emoji selector
+- `themeUtils` - Theme utilities
+- `combineStatuses` - Combine statuses
+- `download` - Download helper
+- `generateLink` - Link generator
+- `feature` - Feature flags
+- `fileUtils` - File utilities
+- `formatBytes` - Format bytes
+- `filterHierarchyByTypes` - Filter hierarchy
+- `getRandomIconColor` - Random icon color
+- `getFileIcons` - File icons
+- `getFileType` - File type detection
+- `getPartOfTheDay` - Time of day
+- `isAppMode` - App mode detection
+- `dates` - Date utilities
+- `hotjar` - Hotjar integration
+
+### Hooks
+- `useMenu` - Menu hook
+- `useDateFnsLocale` - Date-fns locale
+- `useFormatDistance` - Format distance
+- `useSwipeDetect` - Swipe detection
+- `useOAuthErrorParams` - OAuth error params
+- `useDateUtils` - Date utilities
+- `useNumberQueryParam` - Number query param
+- `useDisableWindowScroll` - Disable scroll
+- `useAsyncStatus` - Async status
+- `useAppContainer` - App container
+- `useAppContainerStore` - App container store
+- `useAppContainerDataStore` - App container data store
+- `useSetAppContainerLayout` - Set layout
+
+### Store
+- `searchModal` - Search modal store
+- `onboarding` - Onboarding store
+- `workspacesOrder` - Workspaces order
+- `timezoneStore` - Timezone store
+- `plansModal` - Plans modal store
+- `discordDialogStore` - Discord dialog store
+- `accessOptionsControl` - Access options control
+
+### Utils
+- `formatStorage` - Format storage
+- `getPlanBadgeColor` - Plan badge color
+- `queryParams` - Query params utilities
+
+---
+
+## 🎨 Styling
+
+### CSS Modules
+
+This library uses **CSS Modules** for component styling. All styles are bundled into a single `index.css` file.
+
+**Structure:**
+```
+dist/
+├── index.css                              ← All styles (54 KB)
+├── index.js                               ← JavaScript
+└── components/
+    └── CustomKBD/
+        ├── index.js
+        └── CustomKBD.module.css.js       ← CSS classes mapping
+```
+
+### How It Works
+
+1. **Import styles once:**
+   ```typescript
+   import '@layers-app/shared/styles';
+   ```
+
+2. **All components automatically get correct CSS classes**
+   ```typescript
+   // Component uses CSS Modules internally
+   import styles from './CustomKBD.module.css';
+   <Box className={styles.root} />  // ✅ Scoped class applied
+   ```
+
+3. **No naming conflicts** - classes are scoped (e.g., `_root_195do_1`)
+
+---
+
+## ⚙️ Peer Dependencies
+
+Install these dependencies in your project:
+
+### Required
+```json
+{
+  "react": "^18.3.1",
+  "react-dom": "^18.3.1",
+  "@mantine/core": "8.3.5",
+  "@mantine/hooks": "8.3.5",
+  "@mantine/form": "8.3.5",
+  "@mantine/modals": "8.3.5",
+  "@mantine/notifications": "8.3.5"
+}
+```
+
+### Optional (based on usage)
+```json
+{
+  "@dnd-kit/core": "^6.0.0",
+  "@dnd-kit/sortable": "^8.0.0",
+  "@tabler/icons-react": "^3.7.0",
+  "framer-motion": "^11.3.24",
+  "date-fns": "^4.1.0",
+  "i18next": "^25.5.2",
+  "react-i18next": "^15.7.3",
+  "react-router-dom": "^7.5.2",
+  "zustand": "^5.0.3",
+  "@reduxjs/toolkit": "^2.2.7",
+  "@tanstack/react-query": "^5.52.2"
+}
+```
+
+Full list available in `package.json` `peerDependencies`.
+
+---
+
+## 🔧 Configuration
+
+### TypeScript
+
+Types are included. No additional configuration needed.
+
+```typescript
+import { CustomKBD } from '@layers-app/shared';
+// ✅ Full TypeScript support
+```
+
+### Vite
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  // No special configuration needed
+  // Styles are auto-loaded via import '@layers-app/shared/styles'
+});
+```
+
+### Webpack
+
+```javascript
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+};
+```
+
+---
+
+## 📖 Usage Examples
+
+### Using FilePicker
+
+```typescript
+import { FilePicker } from '@layers-app/shared';
+
+function MyComponent() {
+  const handleFileSelect = (file: File) => {
+    console.log('Selected file:', file);
+  };
+
+  return (
+    <FilePicker
+      onSelect={handleFileSelect}
+      accept="image/*"
+      maxSize={5 * 1024 * 1024} // 5MB
+    />
+  );
+}
+```
+
+### Using EmojiPicker
+
+```typescript
+import { EmojiPicker } from '@layers-app/shared';
+
+function MyComponent() {
+  const handleEmojiSelect = (emoji: string) => {
+    console.log('Selected emoji:', emoji);
+  };
+
+  return (
+    <EmojiPicker
+      onSelect={handleEmojiSelect}
+      position="bottom-start"
+    />
+  );
+}
+```
+
+### Using SearchFilters
+
+```typescript
+import { SearchFilters } from '@layers-app/shared';
+
+function MyComponent() {
+  const [filters, setFilters] = useState({});
+
+  return (
+    <SearchFilters
+      value={filters}
+      onChange={setFilters}
+      fields={[
+        { name: 'status', type: 'select', options: [...] },
+        { name: 'date', type: 'date' },
+      ]}
+    />
+  );
+}
+```
+
+### Using SortableList
+
+```typescript
+import { SortableList } from '@layers-app/shared';
+
+function MyComponent() {
+  const [items, setItems] = useState([...]);
+
+  return (
+    <SortableList
+      items={items}
+      onReorder={setItems}
+      renderItem={(item) => <div>{item.name}</div>}
+    />
+  );
+}
+```
+
+---
+
+## 🏗️ Build Information
+
+### Output Structure
+
+```
+dist/
+├── index.js                  # Main entry point (ESM)
+├── index.d.ts                # TypeScript types
+├── index.css                 # All styles (54 KB)
+├── components/               # Component modules
+├── hooks/                    # Hooks modules
+├── helpers/                  # Helper modules
+└── assets/                   # Asset files
+```
+
+### Bundle Characteristics
+
+- **Format:** ESM only
+- **Tree-shaking:** Full support
+- **CSS:** Scoped CSS Modules
+- **TypeScript:** Full type definitions
+- **Size:** ~457 KB total (400 KB JS + 54 KB CSS + 3 KB CSS mappings)
+
+---
+
+## 🔍 Advanced Usage
+
+### Accessing Individual CSS
+
+If you need specific component styles:
+
+```typescript
+// Import individual component CSS (rarely needed)
+import '@layers-app/shared/dist/components/CustomKBD/CustomKBD.module.css.js';
+```
+
+### Using Assets
+
+```typescript
+// Access assets directly
+import logo from '@layers-app/shared/assets/logo.svg';
+```
+
+### Custom Theme
+
+```typescript
+// Apply Mantine theme
+import { MantineProvider } from '@mantine/core';
+
+function App() {
+  return (
+    <MantineProvider theme={{ /* your theme */ }}>
+      {/* Your app */}
+    </MantineProvider>
+  );
+}
+```
+
+---
+
+## 📊 Performance
+
+### Optimization Tips
+
+1. **Import only what you need:**
+   ```typescript
+   // ✅ Good - tree-shaking works
+   import { CustomKBD } from '@layers-app/shared';
+
+   // ❌ Bad - imports everything
+   import * as Shared from '@layers-app/shared';
+   ```
+
+2. **Styles are loaded once:**
+   ```typescript
+   // Import in main.tsx only
+   import '@layers-app/shared/styles';
+   ```
+
+3. **Use lazy loading for heavy components:**
+   ```typescript
+   const FormViewer = lazy(() =>
+     import('@layers-app/shared').then(m => ({ default: m.FormViewer }))
+   );
+   ```
+
+---
+
+## 🐛 Troubleshooting
+
+### Styles not applied
+
+**Solution:** Ensure you imported styles:
+```typescript
+import '@layers-app/shared/styles';
+```
+
+### TypeScript errors
+
+**Solution:** Check peer dependencies are installed:
+```bash
+npm install react react-dom @mantine/core @mantine/hooks
+```
+
+### Build errors
+
+**Solution:** Ensure you're using ESM-compatible bundler (Vite, Webpack 5+, etc.)
+
+---
+
+## 📝 Notes
+
+### CSS Modules Explained
+
+Files like `CustomKBD.module.css.js` are **JavaScript mappings** for CSS Modules:
+
+```javascript
+// CustomKBD.module.css.js
+export default { root: "_root_195do_1" };
+```
+
+**This is correct behavior!** Actual styles are in `index.css`.
+
+### Internal vs External Packages
+
+- `@layers-app/editor` - Internal monorepo package
+- All other `@layers-app/*` packages may have similar usage
+
+---
+
+## 🔗 Links
+
+- **Repository:** [GitHub](https://github.com/yourusername/layers)
+- **Issues:** [Report a bug](https://github.com/yourusername/layers/issues)
+- **Documentation:** See `/docs` folder
+
+---
+
+## 📄 License
+
+See LICENSE file in the repository.
+
+---
+
+**Made with ❤️ by the Layers team**

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@layers-app/shared",
-  "version": "0.1.5",
+  "version": "0.2.0",
+  "description": "Shared components, hooks, and utilities for Layers application",
   "files": [
-    "dist"
+    "dist",
+    "docs"
   ],
   "publishConfig": {
     "access": "public"
@@ -11,16 +13,29 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/index.css",
+    "./dist/*": "./dist/*",
+    "./assets/*": "./src/assets/*",
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "NODE_OPTIONS='--max-old-space-size=8192' vite build",
     "check:ts": "tsc --noEmit",
     "prePublish": "vite build && npm version patch",
     "watch": "vite build --watch"
   },
-  "dependencies": {
-    "@emoji-mart/data": "^1.2.1"
-  },
   "peerDependencies": {
+    "@dnd-kit/core": "^6.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.0",
     "@mantine/core": "8.3.5",
     "@mantine/dates": "8.3.5",
     "@mantine/dropzone": "8.3.5",
@@ -29,12 +44,18 @@
     "@mantine/modals": "8.3.5",
     "@mantine/notifications": "8.3.5",
     "@reduxjs/toolkit": "^2.2.7",
+    "@sinups/agg": "3.0.0",
     "@tabler/icons-react": "^3.7.0",
     "@tabler/icons-sprite": "^3.29.0",
     "@tanstack/react-query": "^5.52.2",
+    "@tanstack/virtual-core": "^3.0.0",
+    "chroma-js": "^3.1.2",
     "date-fns": "^4.1.0",
     "draggable-ui": "^0.0.1",
     "emoji-mart": "^5.6.0",
+    "exceljs": "^4.3.0",
+    "framer-motion": "^11.3.24",
+    "fuse.js": "^7.1.0",
     "i18next": "^25.5.2",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
@@ -43,12 +64,12 @@
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-i18next": "^15.7.3",
-    "react-joyride": "^2.8.2",
     "react-router-dom": "^7.5.2",
-    "zustand": "^5.0.3",
-    "framer-motion": "^11.3.24"
-  },
-  "devDependencies": {
-    "vite-plugin-css-injected-by-js": "^3.5.1"
+    "react-zoom-pan-pinch": "^3.0.0",
+    "shaka-player": "^4.0.0",
+    "shaka-player-react": "^1.1.5",
+    "styled-components": "^6.0.0",
+    "zod": "^3.0.0",
+    "zustand": "^5.0.3"
   }
 }