@dktunited-techoff/techoff-suite-ui 1.3.1 → 1.4.0

package/esm/components/TsInput/TsInput/TsInput.css

@@ -0,0 +1,43 @@
+.ts-input {
+  position: relative;
+  width: 100%;
+  height: 32px;
+}
+input {
+  width: 100%;
+  height: 100%;
+  padding: 0 10px;
+  border: 1px solid #949494;
+  font-weight: 600;
+}
+input::placeholder {
+  font-weight: 400;
+}
+input:focus {
+  border: 1.5px solid #3643ba;
+}
+.ts-input--padding-1 input {
+  padding: 0 30px 0 10px;
+}
+.ts-input-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  color: #949494;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/TsInput/TsInput/TsInput.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsInputProps } from './TsInput.types';
+import './TsInput.css';
+export declare const TsInput: ({ icon, value, onChange, ...props }: TsInputProps) => React.JSX.Element;

package/esm/components/TsInput/TsInput/TsInput.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import './TsInput.css';
+export const TsInput = ({ icon, value, onChange, ...props }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : ''}` },
+        React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
+        icon && (React.createElement("div", { className: "ts-input-icon" },
+            React.createElement(TsIcon, { name: icon, size: "16" })))));
+};
+//# sourceMappingURL=TsInput.js.map

package/esm/components/TsInput/TsInput/TsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC3E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;QAC7D,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;QACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;YAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsInput/TsInput/TsInput.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInputProps } from './TsInput.types';
+import './TsInput.css';
+
+export const TsInput = ({ icon, value, onChange, ...props }: TsInputProps) => {
+  // #########
+  // Rendering
+  return (
+    <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+      <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
+      {icon && (
+        <div className="ts-input-icon">
+          <TsIcon name={icon} size="16" />
+        </div>
+      )}
+    </div>
+  );
+};

package/esm/components/TsInput/TsInput/TsInput.types.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'react';
+export type TsInputProps = {
+    icon?: string;
+    onChange: (value: string) => void;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/esm/components/TsInput/TsInput/TsInput.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsInput.types.js.map

package/esm/components/TsInput/TsInput/TsInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsInput.types.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.types.tsx"],"names":[],"mappings":""}

package/esm/components/TsInput/TsInput/TsInput.types.tsx

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+
+export type TsInputProps = {
+  icon?: string;
+  onChange: (value: string) => void;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsInput } from '../TsInput';
+import { icons } from '../../../TsIcon/icons';
+
+<Meta title="Components/Input" />
+
+export const inputArgTypes = {
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder of the button.',
+  },
+};
+
+# Input
+
+Input allows the user to enter content and data when the expected user input is a single line of text.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ onChange: () => {} }} argTypes={inputArgTypes}>
+    {args => <TsInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsInput} />

package/lib/components/TsInput/TsInput/TsInput.css

@@ -0,0 +1,43 @@
+.ts-input {
+  position: relative;
+  width: 100%;
+  height: 32px;
+}
+input {
+  width: 100%;
+  height: 100%;
+  padding: 0 10px;
+  border: 1px solid #949494;
+  font-weight: 600;
+}
+input::placeholder {
+  font-weight: 400;
+}
+input:focus {
+  border: 1.5px solid #3643ba;
+}
+.ts-input--padding-1 input {
+  padding: 0 30px 0 10px;
+}
+.ts-input-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  color: #949494;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/components/TsInput/TsInput/TsInput.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsInputProps } from './TsInput.types';
+import './TsInput.css';
+export declare const TsInput: ({ icon, value, onChange, ...props }: TsInputProps) => React.JSX.Element;

package/lib/components/TsInput/TsInput/TsInput.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsInput = void 0;
+const React = require("react");
+const TsIcon_1 = require("../../TsIcon/TsIcon");
+require("./TsInput.css");
+const TsInput = ({ icon, value, onChange, ...props }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : ''}` },
+        React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
+        icon && (React.createElement("div", { className: "ts-input-icon" },
+            React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })))));
+};
+exports.TsInput = TsInput;
+//# sourceMappingURL=TsInput.js.map

package/lib/components/TsInput/TsInput/TsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC3E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;QAC7D,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;QACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;YAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,OAAO,WAalB"}

package/lib/components/TsInput/TsInput/TsInput.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInputProps } from './TsInput.types';
+import './TsInput.css';
+
+export const TsInput = ({ icon, value, onChange, ...props }: TsInputProps) => {
+  // #########
+  // Rendering
+  return (
+    <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+      <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
+      {icon && (
+        <div className="ts-input-icon">
+          <TsIcon name={icon} size="16" />
+        </div>
+      )}
+    </div>
+  );
+};

package/lib/components/TsInput/TsInput/TsInput.types.d.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'react';
+export type TsInputProps = {
+    icon?: string;
+    onChange: (value: string) => void;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/lib/components/TsInput/TsInput/TsInput.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TsInput.types.js.map

package/lib/components/TsInput/TsInput/TsInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsInput.types.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.types.tsx"],"names":[],"mappings":""}

package/lib/components/TsInput/TsInput/TsInput.types.tsx

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+
+export type TsInputProps = {
+  icon?: string;
+  onChange: (value: string) => void;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/lib/components/TsInput/TsInput/__stories__/TsInput.stories.mdx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsInput } from '../TsInput';
+import { icons } from '../../../TsIcon/icons';
+
+<Meta title="Components/Input" />
+
+export const inputArgTypes = {
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder of the button.',
+  },
+};
+
+# Input
+
+Input allows the user to enter content and data when the expected user input is a single line of text.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ onChange: () => {} }} argTypes={inputArgTypes}>
+    {args => <TsInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsInput} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/TsInput/TsInput/TsInput.css

@@ -0,0 +1,43 @@
+.ts-input {
+  position: relative;
+  width: 100%;
+  height: 32px;
+}
+input {
+  width: 100%;
+  height: 100%;
+  padding: 0 10px;
+  border: 1px solid #949494;
+  font-weight: 600;
+}
+input::placeholder {
+  font-weight: 400;
+}
+input:focus {
+  border: 1.5px solid #3643ba;
+}
+.ts-input--padding-1 input {
+  padding: 0 30px 0 10px;
+}
+.ts-input-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  color: #949494;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/src/components/TsInput/TsInput/TsInput.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInputProps } from './TsInput.types';
+import './TsInput.css';
+
+export const TsInput = ({ icon, value, onChange, ...props }: TsInputProps) => {
+  // #########
+  // Rendering
+  return (
+    <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+      <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
+      {icon && (
+        <div className="ts-input-icon">
+          <TsIcon name={icon} size="16" />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/TsInput/TsInput/TsInput.types.tsx

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+
+export type TsInputProps = {
+  icon?: string;
+  onChange: (value: string) => void;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsInput } from '../TsInput';
+import { icons } from '../../../TsIcon/icons';
+
+<Meta title="Components/Input" />
+
+export const inputArgTypes = {
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder of the button.',
+  },
+};
+
+# Input
+
+Input allows the user to enter content and data when the expected user input is a single line of text.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ onChange: () => {} }} argTypes={inputArgTypes}>
+    {args => <TsInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsInput} />