Style fixs (#18)

* chore: wip * chore: update bpm version
odigos-io · May 12, 2024 · a57ba1c · a57ba1c
1 parent 1b56ebf
commit a57ba1c
Show file tree

Hide file tree

Showing 15 changed files with 415 additions and 419 deletions.
diff --git a/dist/index.d.mts b/dist/index.d.mts
@@ -1,4 +1,4 @@
-import React, { FC, ChangeEvent, ReactNode } from 'react';
+import React, { FC, ChangeEvent, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes } from 'react';
 
 interface RadioButtonProps {
     label?: string;
@@ -9,13 +9,9 @@ interface RadioButtonProps {
 }
 declare const RadioButton: FC<RadioButtonProps>;
 
-interface ButtonProps {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: string;
-    children: JSX.Element | JSX.Element[];
-    onClick?: () => void;
     style?: object;
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset' | undefined;
 }
 declare const Button: FC<ButtonProps>;
 
@@ -154,19 +150,14 @@ interface ImageProps {
 }
 declare function ImageComponent({ src, alt, width, height, style, }: ImageProps): React.JSX.Element;
 
-interface InputProps$1 {
+interface InputProps$1 extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     label?: string;
-    value: string;
     onChange: (value: string) => void;
-    type?: string;
     error?: string;
     style?: React.CSSProperties;
-    placeholder?: string;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     tooltip?: string;
-    required?: boolean;
 }
-declare function Input({ label, value, onChange, type, error, style, placeholder, onKeyDown, tooltip, required, }: InputProps$1): JSX.Element;
+declare function Input({ label, value, onChange, type, error, style, onKeyDown, tooltip, required, autoComplete, ...rest }: InputProps$1): JSX.Element;
 
 interface InputProps {
     value: string;

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -1,4 +1,4 @@
-import React, { FC, ChangeEvent, ReactNode } from 'react';
+import React, { FC, ChangeEvent, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes } from 'react';
 
 interface RadioButtonProps {
     label?: string;
@@ -9,13 +9,9 @@ interface RadioButtonProps {
 }
 declare const RadioButton: FC<RadioButtonProps>;
 
-interface ButtonProps {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: string;
-    children: JSX.Element | JSX.Element[];
-    onClick?: () => void;
     style?: object;
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset' | undefined;
 }
 declare const Button: FC<ButtonProps>;
 
@@ -154,19 +150,14 @@ interface ImageProps {
 }
 declare function ImageComponent({ src, alt, width, height, style, }: ImageProps): React.JSX.Element;
 
-interface InputProps$1 {
+interface InputProps$1 extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     label?: string;
-    value: string;
     onChange: (value: string) => void;
-    type?: string;
     error?: string;
     style?: React.CSSProperties;
-    placeholder?: string;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     tooltip?: string;
-    required?: boolean;
 }
-declare function Input({ label, value, onChange, type, error, style, placeholder, onKeyDown, tooltip, required, }: InputProps$1): JSX.Element;
+declare function Input({ label, value, onChange, type, error, style, onKeyDown, tooltip, required, autoComplete, ...rest }: InputProps$1): JSX.Element;
 
 interface InputProps {
     value: string;

diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.mjs b/dist/index.mjs
diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@keyval-dev/design-system",
-  "version": "1.7.8",
+  "version": "1.8.3",
   "private": false,
   "scripts": {
     "dev": "next dev",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,11 @@
 'use client';
-import { MultiInputTable } from '@/design.system';
+import { Checkbox, DataFlow, MultiInputTable } from '@/design.system';
+import { edges, nodes } from '@/design.system/data.flow/builder';
 import React from 'react';
 
 export default function Home() {
   const [values, setValues] = React.useState<string[]>(['']);
+  const [checked, setChecked] = React.useState(false);
   return (
     <div style={{ background: '#0E1C28', height: '100vh', padding: 150 }}>
       <MultiInputTable
@@ -14,6 +16,20 @@ export default function Home() {
         required
         onValuesChange={(newValues: string[]) => setValues(newValues)}
       />
+      <div>
+        <Checkbox
+          label="I agree to the terms and conditions"
+          value={checked}
+          onChange={() => setChecked(!checked)}
+        />
+        <br />
+        <Checkbox
+          label="I agree to the terms and conditions"
+          value={checked}
+          onChange={() => setChecked(!checked)}
+        />
+      </div>
+      <DataFlow nodes={nodes} edges={edges} />
     </div>
   );
 }
diff --git a/src/assets/icons/actions/index.ts b/src/assets/icons/actions/index.ts
@@ -1,5 +1,6 @@
 import AddClusterInfo from './cluster-attr.svg';
 import DeleteAttribute from './delete-attr.svg';
+import RenameAttribute from './rename-attr.svg';
 // Define the type for the ACTION_ICONS object
 interface ActionIcons {
   [key: string]: any;
@@ -8,6 +9,6 @@ interface ActionIcons {
 // Define the ACTION_ICONS with explicit types
 export const ACTION_ICONS: ActionIcons = {
   AddClusterInfo: AddClusterInfo,
-  filter: AddClusterInfo,
+  RenameAttribute: RenameAttribute,
   DeleteAttribute: DeleteAttribute,
 };
diff --git a/src/assets/icons/actions/rename-attr.svg b/src/assets/icons/actions/rename-attr.svg
diff --git a/src/assets/icons/languages/index.ts b/src/assets/icons/languages/index.ts
@@ -6,7 +6,7 @@ export const LANGUAGES_LOGOS = {
   javascript: `${BASE_URL}nodejs.png`,
   python: `${BASE_URL}python.png`,
   dotnet: `${BASE_URL}dotnet.png`,
-  default: `${BASE_URL}go.png`,
+  default: `${BASE_URL}default.png`,
   mysql: `${BASE_URL}mysql.png`,
 };
 

diff --git a/src/design.system/checkbox/checkbox.tsx b/src/design.system/checkbox/checkbox.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-import { Text } from "../text/text";
-import { CheckboxWrapper, CheckboxItem } from "./checkbox.styled";
-import Checked from "../../assets/icons/checkbox-rect.svg";
+import React from 'react';
+import { Text } from '../text/text';
+import { CheckboxWrapper, CheckboxItem } from './checkbox.styled';
+import Checked from '../../assets/icons/checkbox-rect.svg';
 
 interface CheckboxProps {
   value: boolean;
@@ -13,7 +13,7 @@ interface CheckboxProps {
 export function Checkbox({
   onChange,
   value,
-  label = "",
+  label = '',
   disabled = false,
 }: CheckboxProps) {
   return (

diff --git a/src/design.system/data.flow/action.node.tsx b/src/design.system/data.flow/action.node.tsx
@@ -14,13 +14,11 @@ const ActionContainer = styled.div`
   background: ${({ theme }) => theme.colors.dark};
   align-items: center;
   gap: 4px;
-  width: 80px;
-  height: 80px;
+  min-width: 80px;
 `;
 
 const TextWrapper = styled.div`
   max-width: 72px;
-  height: 40px;
   text-align: center;
   display: flex;
   align-items: center;

diff --git a/src/design.system/data.flow/builder.ts b/src/design.system/data.flow/builder.ts
@@ -154,7 +154,7 @@ const action = [
     id: 'aci-f6c9f',
     type: 'AddClusterInfo',
     spec: {
-      actionName: 'Cluster  Attributes',
+      actionName: 'This is tetst test Cluster Attributes',
       notes:
         'Actions are a way to modify the OpenTelemetry data recorded by Odigos Sources, before it is exported to your Odigos Destinations.',
       signals: ['METRICS', 'TRACES'],
@@ -168,7 +168,7 @@ const action = [
   },
   {
     id: 'aci-hfgcb',
-    type: 'AddClusterInfo',
+    type: 'DeleteAttribute',
     spec: {
       actionName: 'Link',
       notes: 'Link to docs',
@@ -187,9 +187,9 @@ const action = [
   },
   {
     id: 'aci-r67mp',
-    type: 'AddClusterInfo',
+    type: 'RenameAttribute',
     spec: {
-      actionName: 'Initialize',
+      actionName: 'Initialize Initialize',
       notes: 'This is the initialization phase of the cluster.',
       signals: ['LOGS', 'METRICS', 'TRACES'],
       clusterAttributes: [

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -24,9 +20,7 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
   "include": [
@@ -36,7 +30,5 @@
     ".next/types/**/*.ts",
     "custom.d.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }