@dktunited-techoff/techoff-suite-ui 0.8.15 → 0.9.0

package/esm/components/Select/Select.css

@@ -0,0 +1,30 @@
+.select-container {
+  display: flex;
+  flex-direction: column;
+}
+.select-container > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.select-container > select {
+  width: 100%;
+  height: 32px;
+  padding: 0 40px 0 12px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #007dbc;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* ######### */
+/* 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/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SelectProps } from './Select.types';
+import './Select.css';
+export declare const Select: ({ label, options, onChange }: SelectProps) => React.JSX.Element;

package/esm/components/Select/Select.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import './Select.css';
+export const Select = ({ label, options, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = (e) => onChange(e.target.value);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "select-container" },
+        label && React.createElement("label", null, label),
+        React.createElement("select", { onChange: handleChange },
+            React.createElement(React.Fragment, null,
+                React.createElement("option", null, "-"),
+                options))));
+};
+//# sourceMappingURL=Select.js.map

package/esm/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAe,EAAE,EAAE;IAClE,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAiC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAErF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC9B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAChC,gCAAQ,QAAQ,EAAE,YAAY;YAC5B;gBACE,wCAAkB;gBACjB,OAAO,CACP,CACI,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type SelectProps = {
+    label?: string;
+    options: ReactNode[];
+    onChange: (val: string) => void;
+};

package/esm/components/Select/Select.types.js

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

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

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Select } from '../Select';
+
+<Meta title="Components/Select" />
+
+export const selectArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when the value of the select changes.',
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      options: [<option value="orange">Orange</option>, <option value="apple">Apple</option>],
+      onChange: () => {},
+    }}
+    argTypes={selectArgTypes}
+  >
+    {args => <Select {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Select} />

package/lib/components/Select/Select.css

@@ -0,0 +1,30 @@
+.select-container {
+  display: flex;
+  flex-direction: column;
+}
+.select-container > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.select-container > select {
+  width: 100%;
+  height: 32px;
+  padding: 0 40px 0 12px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #007dbc;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* ######### */
+/* 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/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SelectProps } from './Select.types';
+import './Select.css';
+export declare const Select: ({ label, options, onChange }: SelectProps) => React.JSX.Element;

package/lib/components/Select/Select.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const React = require("react");
+require("./Select.css");
+const Select = ({ label, options, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = (e) => onChange(e.target.value);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "select-container" },
+        label && React.createElement("label", null, label),
+        React.createElement("select", { onChange: handleChange },
+            React.createElement(React.Fragment, null,
+                React.createElement("option", null, "-"),
+                options))));
+};
+exports.Select = Select;
+//# sourceMappingURL=Select.js.map

package/lib/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAG/B,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAe,EAAE,EAAE;IAClE,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAiC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAErF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC9B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAChC,gCAAQ,QAAQ,EAAE,YAAY;YAC5B;gBACE,wCAAkB;gBACjB,OAAO,CACP,CACI,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,MAAM,UAkBjB"}

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type SelectProps = {
+    label?: string;
+    options: ReactNode[];
+    onChange: (val: string) => void;
+};

package/lib/components/Select/Select.types.js

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

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

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Select } from '../Select';
+
+<Meta title="Components/Select" />
+
+export const selectArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when the value of the select changes.',
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      options: [<option value="orange">Orange</option>, <option value="apple">Apple</option>],
+      onChange: () => {},
+    }}
+    argTypes={selectArgTypes}
+  >
+    {args => <Select {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Select} />

package/package.json

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

package/src/components/Select/Select.css

@@ -0,0 +1,30 @@
+.select-container {
+  display: flex;
+  flex-direction: column;
+}
+.select-container > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.select-container > select {
+  width: 100%;
+  height: 32px;
+  padding: 0 40px 0 12px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #007dbc;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+/* ######### */
+/* 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/Select/Select.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ChangeEvent } from 'react';
+import { SelectProps } from './Select.types';
+import './Select.css';
+
+export const Select = ({ label, options, onChange }: SelectProps) => {
+  // ########
+  // Handlers
+  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => onChange(e.target.value);
+
+  // #########
+  // Rendering
+  return (
+    <div className="select-container">
+      {label && <label>{label}</label>}
+      <select onChange={handleChange}>
+        <>
+          <option>-</option>
+          {options}
+        </>
+      </select>
+    </div>
+  );
+};

package/src/components/Select/Select.types.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+
+export type SelectProps = { label?: string; options: ReactNode[]; onChange: (val: string) => void };

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Select } from '../Select';
+
+<Meta title="Components/Select" />
+
+export const selectArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when the value of the select changes.',
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      options: [<option value="orange">Orange</option>, <option value="apple">Apple</option>],
+      onChange: () => {},
+    }}
+    argTypes={selectArgTypes}
+  >
+    {args => <Select {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Select} />