@messenger-box/slack-ui-browser 10.0.3-alpha.176

package/src/screens/Home/index.ts

@@ -0,0 +1,4 @@
+export { default as HomeScreen } from './HomeScreen';
+export { RefetchContext, ChannelsDataContext } from './HomeScreen';
+
+export { default } from './HomeScreen';

package/src/screens/NewChannel/NewChannelScreen.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useCallback } from 'react';
+import { useNavigate, useLocation } from '@remix-run/react';
+import { FiX, FiHash, FiLock } from '../../icons';
+import { slackUiRoutePaths } from '../../constants/routes';
+
+interface NewChannelScreenProps {
+    onClose?: () => void;
+}
+
+const NewChannelScreen: React.FC<NewChannelScreenProps> = ({ onClose }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const orgSlug = location.pathname.split('/')[2];
+
+    const [channelName, setChannelName] = useState('');
+    const [description, setDescription] = useState('');
+    const [isPrivate, setIsPrivate] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleClose = useCallback(() => {
+        if (onClose) {
+            onClose();
+        } else {
+            navigate(slackUiRoutePaths.home(orgSlug));
+        }
+    }, [navigate, orgSlug, onClose]);
+
+    const handleSubmit = useCallback(async (e: React.FormEvent) => {
+        e.preventDefault();
+        
+        if (!channelName.trim()) {
+            setError('Channel name is required');
+            return;
+        }
+
+        // Validate channel name format (lowercase, no spaces, alphanumeric with hyphens)
+        const validName = channelName.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
+        if (validName !== channelName) {
+            setChannelName(validName);
+        }
+
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            // TODO: Implement actual channel creation mutation
+            console.log('Creating channel:', { name: channelName, description, isPrivate });
+            
+            // Navigate to the new channel after creation
+            // For now, just go back to home
+            handleClose();
+        } catch (err) {
+            setError('Failed to create channel. Please try again.');
+        } finally {
+            setIsLoading(false);
+        }
+    }, [channelName, description, isPrivate, handleClose]);
+
+    const handleChannelNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        // Auto-format: lowercase, replace spaces with hyphens
+        const value = e.target.value.toLowerCase().replace(/\s+/g, '-');
+        setChannelName(value);
+        setError(null);
+    };
+
+    return (
+        <div className="flex flex-col h-full bg-white">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+                <button
+                    onClick={handleClose}
+                    className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+                >
+                    <FiX className="w-5 h-5 text-gray-600" />
+                </button>
+                <h1 className="text-lg font-semibold text-gray-900">Create Channel</h1>
+                <button
+                    onClick={handleSubmit}
+                    disabled={isLoading || !channelName.trim()}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                    {isLoading ? 'Creating...' : 'Create'}
+                </button>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-4 space-y-6">
+                {/* Channel Type Toggle */}
+                <div className="space-y-2">
+                    <label className="block text-sm font-medium text-gray-700">Channel Type</label>
+                    <div className="flex gap-4">
+                        <button
+                            type="button"
+                            onClick={() => setIsPrivate(false)}
+                            className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 transition-colors ${
+                                !isPrivate 
+                                    ? 'border-blue-500 bg-blue-50 text-blue-700' 
+                                    : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
+                            }`}
+                        >
+                            <FiHash className="w-5 h-5" />
+                            <div className="text-left">
+                                <div className="font-medium">Public</div>
+                                <div className="text-xs text-gray-500">Anyone can join</div>
+                            </div>
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setIsPrivate(true)}
+                            className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 transition-colors ${
+                                isPrivate 
+                                    ? 'border-blue-500 bg-blue-50 text-blue-700' 
+                                    : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
+                            }`}
+                        >
+                            <FiLock className="w-5 h-5" />
+                            <div className="text-left">
+                                <div className="font-medium">Private</div>
+                                <div className="text-xs text-gray-500">Invite only</div>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+
+                {/* Channel Name */}
+                <div className="space-y-2">
+                    <label htmlFor="channelName" className="block text-sm font-medium text-gray-700">
+                        Channel Name
+                    </label>
+                    <div className="relative">
+                        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                            {isPrivate ? (
+                                <FiLock className="w-5 h-5 text-gray-400" />
+                            ) : (
+                                <FiHash className="w-5 h-5 text-gray-400" />
+                            )}
+                        </div>
+                        <input
+                            id="channelName"
+                            type="text"
+                            value={channelName}
+                            onChange={handleChannelNameChange}
+                            placeholder="e.g. marketing, engineering"
+                            className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                            maxLength={80}
+                        />
+                    </div>
+                    <p className="text-xs text-gray-500">
+                        Lowercase letters, numbers, and hyphens only. Max 80 characters.
+                    </p>
+                    {error && <p className="text-xs text-red-500">{error}</p>}
+                </div>
+
+                {/* Description */}
+                <div className="space-y-2">
+                    <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+                        Description <span className="text-gray-400">(optional)</span>
+                    </label>
+                    <textarea
+                        id="description"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="What's this channel about?"
+                        rows={3}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none"
+                        maxLength={250}
+                    />
+                    <p className="text-xs text-gray-500">
+                        {description.length}/250 characters
+                    </p>
+                </div>
+
+                {/* Info */}
+                <div className="bg-gray-50 rounded-lg p-4">
+                    <h3 className="text-sm font-medium text-gray-700 mb-2">What happens next?</h3>
+                    <ul className="text-sm text-gray-600 space-y-1">
+                        <li>• You'll be added as the channel admin</li>
+                        <li>• You can invite members after creating the channel</li>
+                        {isPrivate && <li>• Only invited members can see and join this channel</li>}
+                    </ul>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default React.memo(NewChannelScreen);

package/src/screens/NewChannel/index.ts

@@ -0,0 +1,2 @@
+export { default } from './NewChannelScreen';
+export { default as NewChannelScreen } from './NewChannelScreen';

package/src/screens/index.ts

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

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "lib",
+        "declaration": true,
+        "declarationDir": "lib",
+        "types": ["@types/node", "@types/jest", "../../../typings"],
+        "skipLibCheck": true,
+        "jsx": "react-jsx"
+    },
+    "include": ["src"],
+    "exclude": [
+        "**/*.test.ts",
+        "../../../node_modules",
+        "node_modules",
+        "lib",
+        "webpack.config.js",
+        "rollup.config.mjs"
+    ]
+}