gox-design-system 0.0.6 → 0.0.8

package/.storybook/main.js

@@ -0,0 +1,9 @@
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+  ],
+  framework: '@storybook/react',
+};

package/package.json

@@ -1,9 +1,7 @@
 {
   "name": "gox-design-system",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "private": false,
-  "main": "./index.js",
-  "module": "./index.js",
   "dependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -17,15 +15,19 @@
     "react-dom": "^19.0.0",
     "react-scripts": "^5.0.1",
     "tsc": "^2.0.4",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "typescript": "^5.4.5 ",
+    "web-vitals": "^2.1.4",
+    "styled-components": "^5.3.10",
+    "polished": "^4.2.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "compile": "npx tsc"
+    "compile": "npx tsc",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "eslintConfig": {
     "extends": [

package/src/App.tsx

@@ -1,24 +1,12 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Input } from './components'; // Assuming Input is defined in a file named Input.tsx
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Input placeholder={''} value={''} onChange={function (e: React.ChangeEvent<HTMLInputElement>): void {
+        throw new Error('Function not implemented.');
+      } }/>
     </div>
   );
 }

package/src/components/Avatar.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface AvatarProps {
+  src: string;
+  alt: string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const Avatar = ({ src, alt, size = 'medium' }: AvatarProps) => {
+  const sizeClasses = {
+    small: 'w-8 h-8',
+    medium: 'w-12 h-12',
+    large: 'w-16 h-16',
+  };
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={`rounded-full ${sizeClasses[size]} object-cover`}
+    />
+  );
+};

package/src/components/Badge.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface BadgeProps {
+  label: string;
+  color?: 'blue' | 'green' | 'red' | 'gray';
+}
+
+export const Badge = ({ label, color = 'gray' }: BadgeProps) => {
+  const colorClasses = {
+    blue: 'bg-blue-500 text-white',
+    green: 'bg-green-500 text-white',
+    red: 'bg-red-500 text-white',
+    gray: 'bg-gray-500 text-white',
+  };
+
+  return (
+    <span className={`px-2 py-1 text-sm rounded ${colorClasses[color]}`}>
+      {label}
+    </span>
+  );
+};

package/src/components/BreadCrumb.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Link } from './Link';
+
+interface BreadCrumbItem {
+  label: string;
+  href: string;
+}
+
+interface BreadCrumbProps {
+  items: BreadCrumbItem[];
+  className?: string;
+}
+
+export const BreadCrumb = ({ items, className = '' }: BreadCrumbProps) => {
+  return (
+    <nav className={`flex space-x-2 ${className}`} aria-label="breadcrumb">
+      {items.map((item, index) => (
+        <React.Fragment key={index}>
+          <Link href={item.href} className="text-gray-500 hover:text-gray-700">
+            {item.label}
+          </Link>
+          {index < items.length - 1 && <span className="text-gray-400">/</span>}
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+};

package/src/components/Button.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTheme } from '../theme/ThemeProvider';
+
+interface ButtonProps {
+  label: string;
+  onClick: () => void;
+}
+
+export const Button = ({ label, onClick }: ButtonProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <button
+      onClick={onClick}
+      className={`px-4 py-2 rounded ${
+        theme === 'light' ? 'bg-blue-500 text-white' : 'bg-gray-700 text-gray-200'
+      }`}
+    >
+      {label}
+    </button>
+  );
+};

package/src/components/Card.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import { useTheme } from '../theme/ThemeProvider';
+
+interface CardProps {
+  children: ReactNode;
+}
+
+export const Card = ({ children }: CardProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <div
+      className={`p-4 rounded shadow ${
+        theme === 'light' ? 'bg-white text-black' : 'bg-gray-800 text-gray-100'
+      }`}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Checkbox.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTheme } from '../theme/ThemeProvider';
+
+interface CheckboxProps {
+  label: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Checkbox = ({ label, checked, onChange }: CheckboxProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <label className="flex items-center space-x-2">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        className={`rounded ${
+          theme === 'light' ? 'text-blue-500' : 'text-gray-400'
+        }`}
+      />
+      <span className={theme === 'light' ? 'text-black' : 'text-gray-100'}>{label}</span>
+    </label>
+  );
+};

package/src/components/Input.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTheme } from '../theme/ThemeProvider';
+
+interface InputProps {
+  placeholder: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Input = ({ placeholder, value, onChange }: InputProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <input
+      type="text"
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      className={`px-3 py-2 rounded border ${
+        theme === 'light' ? 'border-gray-300 bg-white text-black' : 'border-gray-600 bg-gray-800 text-gray-100'
+      }`}
+    />
+  );
+};

package/src/components/Label.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface LabelProps {
+  text: string;
+  htmlFor?: string;
+  className?: string;
+}
+
+export const Label = ({ text, htmlFor, className = '' }: LabelProps) => {
+  return (
+    <label htmlFor={htmlFor} className={`text-gray-700 ${className}`}>
+      {text}
+    </label>
+  );
+};

package/src/components/Link.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface LinkProps {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const Link = ({ href, children, className = '' }: LinkProps) => {
+  return (
+    <a href={href} className={`text-blue-500 hover:underline ${className}`}>
+      {children}
+    </a>
+  );
+};

package/src/components/Modal.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import { useTheme } from '../theme/ThemeProvider';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
+  const { theme } = useTheme();
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 ${
+        theme === 'light' ? 'text-black' : 'text-gray-100'
+      }`}
+    >
+      <div
+        className={`p-6 rounded shadow-lg ${
+          theme === 'light' ? 'bg-white' : 'bg-gray-800'
+        }`}
+      >
+        {children}
+        <button
+          onClick={onClose}
+          className={`mt-4 px-4 py-2 rounded ${
+            theme === 'light' ? 'bg-red-500 text-white' : 'bg-red-700 text-gray-200'
+          }`}
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/Tabs.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+interface Tab {
+  label: string;
+  content: React.ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  defaultActiveTab?: number;
+}
+
+export const Tabs = ({ tabs, defaultActiveTab = 0 }: TabsProps) => {
+  const [activeTab, setActiveTab] = useState(defaultActiveTab);
+
+  return (
+    <div>
+      <div className="flex border-b">
+        {tabs.map((tab, index) => (
+          <button
+            key={index}
+            className={`px-4 py-2 -mb-px ${
+              activeTab === index
+                ? 'border-b-2 border-blue-500 text-blue-500'
+                : 'text-gray-500'
+            }`}
+            onClick={() => setActiveTab(index)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="p-4">{tabs[activeTab]?.content}</div>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export { ThemeProvider, useTheme } from '../theme/ThemeProvider';
+export { Button } from './Button';
+export { Card } from './Card';
+export { Input } from './Input';
+export { Checkbox } from './Checkbox';
+export { Modal } from './Modal';
+export { Avatar } from './Avatar';
+export { Badge } from './Badge';

package/src/index.tsx

@@ -3,16 +3,13 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import Input from './components/input';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <Input label={''} value={''} onChange={function (event: React.ChangeEvent<HTMLInputElement>): void {
-      throw new Error('Function not implemented.');
-    } } />
+    <App/>
   </React.StrictMode>
 );
 

package/src/styles/global.css

@@ -0,0 +1,19 @@
+body.light {
+  background-color: #f9f9f9;
+  color: #333;
+}
+
+body.dark {
+  background-color: #121212;
+  color: #f9f9f9;
+}
+
+button {
+  font-family: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+div {
+  font-family: 'Arial', sans-serif;
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+const ThemeContext = createContext({
+  theme: 'light',
+  toggleTheme: () => {},
+});
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      <div className={theme}>{children}</div>
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);

package/src/components/input/index.tsx

@@ -1,49 +0,0 @@
-export interface InputProps {
-    label: string;
-    value: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    type?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    error?: boolean;
-    errorMessage?: string;      
-    required?: boolean;
-    maxLength?: number;
-    minLength?: number;
-    pattern?: string;
-    autoComplete?: string;
-    autoFocus?: boolean;
-    readOnly?: boolean;
-    size?: "small" | "medium" | "large";
-    className?: string;
-    style?: React.CSSProperties;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;   
-    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-    onCut?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-    onCopy?: (event: React.ClipboardEvent<HTMLInputElement>) => void;       
-    onContextMenu?: (event: React.MouseEvent<HTMLInputElement>) => void;
-    onSelect?: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-    onChangeCapture?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocusCapture?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onBlurCapture?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onKeyDownCapture?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onKeyUpCapture?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onKeyPressCapture?: (event: React.KeyboardEvent<HTMLInputElement>) => void; 
-    onPasteCapture?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-    onCutCapture?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-    onCopyCapture?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-    onContextMenuCapture?: (event: React.MouseEvent<HTMLInputElement>) => void;
-    onSelectCapture?: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-  };
-
-
-export default function Input({
-    placeholder = "Omkar",
-    type 
-}: InputProps) {
-    return(<input type={type} placeholder={placeholder}/>)
-}