Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@codeannex/ui-react

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@codeannex/ui-react - npm Package Compare versions

Comparing version
0.0.1
 to
0.0.2
+68
lib/components/Button/Button.js
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import * as React from 'react';
import classNames from 'classnames';
import { Actionable } from '../../core';
export let ButtonType;
(function (ButtonType) {
ButtonType["BUTTON"] = "button";
ButtonType["RESET"] = "reset";
ButtonType["SUBMIT"] = "submit";
})(ButtonType || (ButtonType = {}));
export let ButtonClasses;
(function (ButtonClasses) {
ButtonClasses["SHARED"] = "btn__base";
ButtonClasses["DEFAULT"] = "btn__primary";
ButtonClasses["SECONDARY"] = "btn__secondary";
ButtonClasses["SUCCESS"] = "btn__success";
ButtonClasses["DANGER"] = "btn__danger";
ButtonClasses["WARNING"] = "btn__warning";
ButtonClasses["INFO"] = "btn__info";
ButtonClasses["LIGHT"] = "btn__light";
ButtonClasses["DARL"] = "btn__dark";
ButtonClasses["LINK"] = "btn__link";
})(ButtonClasses || (ButtonClasses = {}));
export const BUTTON_TEST_ID = 'codeannex-button-component';
/**
* @Codeannex UI React: Button Component
*
* Button Component
*/
const _Button = function ({
buttonClass,
children,
classes,
classPrefix,
forwardedRef,
label,
...rest
}) {
let classBase = '';
if (buttonClass) {
if (classPrefix) {
classBase = classPrefix + ButtonClasses.SHARED;
} else {
classBase = ButtonClasses.SHARED;
}
}
const props = { ...rest,
className: classNames(classBase, buttonClass && classPrefix ? classPrefix + buttonClass : buttonClass, classes && classes.length && classes.join(' '))
};
const content = label ? label : children;
return /*#__PURE__*/React.createElement(Actionable, _extends({}, props, {
ref: forwardedRef
}), content);
};
export const Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(_Button, _extends({}, props, {
forwardedRef: ref
}));
});
+1
lib/components/Button/index.js
export * from './Button';
+151
lib/components/Button/README.md
# Button
A React Component that returns an actionable button element.
---
### Props (Required)
|Prop |Default |Type |Description
|--- |--- |--- |--- |
|N/A |N/A |N/A |N/A |
---
### Props (Optional)
|Prop |Default |Type |Description
|--- |--- |--- |--- |
|buttonClass |disabled |enum |Enables class hooks.
|classes |none |array |Adds custom classes to the element.
|classPrefix |none |string |Custom prefix added to the class hooks. ButtonClass must be enabled.
|disabled |none |boolean |Sets the disabled attribute to the button element.
|label |none |string |Provides the button text. This will override the children prop.
|onClick |none |function |Provides a callback function on button click.
|ref |none |varies |The ref will be forwarded to the element node.
|type |'button' |string |Sets the type attribute to the button element. Available types are &nbsp; `button - submit - reset`.
---
### Usage
```
import { Button, ButtonType, ButtonStyle } from @codeannex/ui-react';
export const App = () => {
const ref = React.useRef<HTMLButtonElement>(null);
const handleSubmit = () => {
...code
};
return (
<div>
<Button
ref={ref}
onClick={handleSubmit}
type={ButtonType.Submit}
buttonStyle={ButtonStyle.Default}
label="Submit"
/>
</div>
);
}
```
---
#### buttonClass
Provides a group of class hooks for button styles, (classHooks must be enabled). This feature does not apply any opinionated CSS rules, it simply sets the defined class to the elements class list.
* ButtonStyle.Danger `button__primary`
* ButtonStyle.Secondary `button__secondary`
* ButtonStyle.Success `button__success`
* ButtonStyle.Danger `button__danger`
* ButtonStyle.Warning `button__warning`
* ButtonStyle.Info `button__info`
* ButtonStyle.Light `button__light`
* ButtonStyle.Dark `button__dark`
* ButtonStyle.Link `button__link`
#### buttonStyle
```
import { Button, ButtonStyle } from from @codeannex/ui-react';
<Button
label="Submit"
classHooks={true}
buttonStyle={ButtonStyle.Danger}
/>
Renders:
<button class="tks-button tks-button--danger">Submit</button>
```
---
#### children
Support for React children prop allowing the use of the composition model.
```
<Button>
<p>Some special submit <span>text</span></p>
</Button>
Renders:
<button>
<p>Some special submit <span>text</span></p>
</button>
```
---
#### classes
When class names are added to the classes prop array, those class names are added to the elements class list.
```
const customClassList = ['one', 'two', 'three'];
const label = 'Submit';
<Button
classes={customClassList}
>
{title}
</Button>
Renders:
<button class="one two three">Submit</button>
```
---
#### disabled
Disables the event handler rendering the button unclickable and disabled.
---
#### label
Provides the button with text content. This will override any children.
```
const label = 'Submit';
<Button label={label} />
Renders:
<button>Submit</button>
```
---
#### ref
The component will forward the ref to the button element providing access to the DOM node.
---
#### type
Specifies the HTML button type attribute.
* ButtonType.Button &nbsp; `type="button"`
* ButtonType.Reset &nbsp; `type="reset"`
* ButtonType.Submit &nbsp; `type="submit"`
---
---
### Notes:
+38
lib/components/Card/Card.js
import * as React from 'react';
import classNames from 'classnames';
import { Actionable } from '../../core';
export let CardNodeType;
(function (CardNodeType) {
CardNodeType["DIV"] = "div";
CardNodeType["ARTICLE"] = "article";
})(CardNodeType || (CardNodeType = {}));
export let CardClasses;
(function (CardClasses) {
CardClasses["SHARED"] = "card__base";
CardClasses["CLICKABLE"] = "card__clickable";
})(CardClasses || (CardClasses = {}));
export const CARD_TEST_ID = 'codeannex-card-component';
/**
* @Codeannex UI React: Card Component
*
* Card Component
*/
export const Card = function ({
children,
classes,
classHooks,
el,
...rest
}) {
const htmlElement = el ? el : CardNodeType.DIV;
const props = { ...rest,
from: htmlElement,
className: classNames(classHooks && CardClasses.SHARED, rest.onClick && CardClasses.CLICKABLE, classes && classes.length && classes.join(' '))
};
return /*#__PURE__*/React.createElement(Actionable, props, children);
};
+1
lib/components/Card/index.js
export * from './Card';
+40
lib/components/Card/README.md
# Card
A React Component that returns an actionable card component.
---
### Props (Required)
|Prop |Default |Type |Description
|--- |--- |--- |--- |
|children |N/A |N/A |N/A |
---
### Props (Optional)
|Prop |Default |Type |Description
|--- |--- |--- |--- |
|classHooks |disabled |boolean |nables class hooks.
|classes |none |array |Adds custom classes to the element.
|disabled |false |boolean |Specifies if the component is disabled.
|focusable |true |boolean |Enables tab focus.
|el |div |string |Specifies the node type.
|onClick |none |func |Callback for card onClick.
---
### Usage
```$xslt
import { Card, CardNodeType } from @codeannex/ui-react';
export const Page = ({title, classList}) => {
const [classes, setClasses] = React.useState([...classList]);
return (
<Card
el={CardNodeType.ARTICLE}
classes={classes}
>
{title}
</Card>
);
};
```
---
+86
lib/components/Heading/Heading.js
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import * as React from 'react';
import classNames from 'classnames';
import { ElementType } from '../../core';
export let HeadingType;
(function (HeadingType) {
HeadingType["H1"] = "h1";
HeadingType["H2"] = "h2";
HeadingType["H3"] = "h3";
HeadingType["H4"] = "h4";
HeadingType["H5"] = "h5";
HeadingType["H6"] = "h6";
})(HeadingType || (HeadingType = {}));
export let HeadingClasses;
(function (HeadingClasses) {
HeadingClasses["Shared"] = "heading__base";
HeadingClasses["h1"] = "heading__h1";
HeadingClasses["h2"] = "heading__h2";
HeadingClasses["h3"] = "heading__h3";
HeadingClasses["h4"] = "heading__h4";
HeadingClasses["h5"] = "heading__h5";
HeadingClasses["h6"] = "heading__h6";
})(HeadingClasses || (HeadingClasses = {}));
export const HEADING_TEST_ID = 'codeannex-heading-component';
/**
* @Codeannex UI React: Heading Component
*
* Heading Component
*/
const _Heading = function ({
children,
classes,
classPrefix,
el,
forwardedRef,
headingClass,
label,
...rest
}) {
let classBase = '';
let classHeading = '';
let htmlElement = '';
for (const value of Object.values(HeadingType)) {
if (el === value) {
htmlElement = value;
break;
}
}
if (!htmlElement) {
throw new Error('Heading node type must be h1 thru h6');
}
if (headingClass) {
if (classPrefix) {
classBase = classPrefix + HeadingClasses.Shared;
classHeading = classPrefix + HeadingClasses[htmlElement];
} else {
classBase = HeadingClasses.Shared;
classHeading = HeadingClasses[htmlElement];
}
}
const classList = classNames(classBase, classHeading, classes && classes.length && classes.join(' '));
const props = { ...rest,
from: htmlElement,
className: classList ? classList : null
};
const content = label ? label : children;
return /*#__PURE__*/React.createElement(ElementType, _extends({}, props, {
ref: forwardedRef
}), content);
};
export const Heading = /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(_Heading, _extends({}, props, {
forwardedRef: ref
}));
});
+1
lib/components/Heading/index.js
export * from './Heading';
+133
lib/components/Heading/README.md
# Heading
A React Component that returns a heading (h) element.
```$xslt
h1 h2 h3 h4 h5 h6
```
---
### Props (Required)
|Prop |Default |Type |Description
|--- |--- |--- |--- |
|el |none |enum |Specifies the heading h1 thru h6,
---
### Props (Optional)
|Prop |Default |Type |Description
|--- |--- |--- |--- |
|classes |none |array |Adds custom classes to the element.
|classPrefix |none |string |Custom prefix added to the class hooks. HeadingClass must be enabled.
|headingClass |false |boolean |Enables class hooks.
|label |none |string |Specifies the heading text.
---
### Usage 1
```
import { Heading, HeadingType } from @codeannex/ui-react';
export const Page = ({title, classList}) => {
return (
<Heading
el={HeadingType.H2}
label={title}
/>
);
};
```
---
### Usage 2
```
import { Heading, HeadingType } from @codeannex/ui-react';
export const Page = ({title, classList}) => {
return (
<Heading el={HeadingType.H2}>
{title}
</Heading>
);
};
```
---
### Usage 3 children
Support for React children prop allowing the use of the composition model.
```
import { Heading, HeadingType } from @codeannex/ui-react';
export const Page = ({title, classList}) => {
return (
<Heading el={HeadingType.H2}>
<span>Some special submit <span>{text}</span></span>
</Heading>
);
};
```
---
#### classHooks
If classHooks is enabled the component adds two default class hooks.
```$xslt
<h2 class="tks-heading tks-h2">Some title text</h2>
```
---
#### classes
When class names are added to the classes prop array, those class names are added to the elements class list.
```$xslt
const customClassList = ['one', 'two', 'three'];
<Heading
el={HeadingType.H2}
classes={customClassList}
>
{title}
</Heading>
Renders:
<h2 class="one two three">Some title text</h2>
```
---
#### el
El prop takes in a string value of type ***HeadingType***. HeadingType ranges from ***HeadingType.H1 thru HeadingType.H6***.
```$xslt
import { Heading, HeadingType } from @codeannex/ui-react';
```
#### label
Provides the heading with text content. This will override any children.
```
const label = 'Promo';
<h2 label={label} />
Renders:
<h2>Promo</h2>
```
---
#### Ref
The component allows for a ref to be added and will be forwarded to the heading element.
```$xslt
<Heading
el={HeadingType.H2}
ref={ref}
>
{title}
</Heading>
```
+59
lib/core/Actionable/Actionable.js
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import * as React from 'react'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
const defaultProps = {
/**
* Sets the element's `aria-disabled` attribute.
* @default false
*/
disabled: false,
/**
* Sets the underlying DOM element tag.
* @default "button"
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
from: 'button'
};
/**
* @Codeannex UI React: Core <Element Components>
*
* Actionable Component
* Returns a button element by default with encapsulated functionality.
*/
const _Actionable = function ({
disabled,
from: Component,
forwardedRef,
onClick,
...rest
}) {
// Handlers
const handleClick = React.useCallback(function (event) {
if (disabled) {
event.stopPropagation();
event.preventDefault();
return;
}
if (onClick) {
onClick(event);
}
}, [disabled, onClick]);
const props = {
ref: forwardedRef,
disabled,
onClick: handleClick,
...rest
};
return /*#__PURE__*/React.createElement(Component, props);
};
_Actionable.defaultProps = defaultProps;
export const Actionable = /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(_Actionable, _extends({}, props, {
forwardedRef: ref
}));
});
+1
lib/core/Actionable/index.js
export * from './Actionable';
+2
lib/core/Actionable/README.md
# Actionable
A React Component that provides action methods to the parent component. Actionable is a base component and is not used directly.
+27
lib/core/ElementType/ElementType.js
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import * as React from 'react'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
/**
* @Codeannex UI React: Core <Element Components>
*
* ElementType Component
* Returns an HTML element based on prop argument.
*/
const _ElementType = function ({
from: Component,
forwardedRef,
...rest
}) {
const props = {
ref: forwardedRef,
...rest
};
return /*#__PURE__*/React.createElement(Component, props);
};
export const ElementType = /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement(_ElementType, _extends({}, props, {
forwardedRef: ref
}));
});
+1
lib/core/ElementType/index.js
export * from './ElementType';
+19
lib/core/ElementType/README.md
# ElementType
A React Component that returns an HTML element based on a prop argument. ElementType is a base component and is not used directly.
## Props (Required)
The only requirement for use is to pass a string representation of the expected generated element.
```
const props = {
...rest,
from: htmlElement // might be 'div', 'article', etc.
};
return (
<ElementType { ...props } ref={forwardedRef}>
{children}
</ElementType>
);
```
+2
lib/core/index.js
export * from './Actionable';
export * from './ElementType';
+3
lib/index.js
export * from './components/Button';
export * from './components/Card';
export * from './components/Heading';
+3
-2
package.json
{
"name": "@codeannex/ui-react",
"version": "0.0.1",
"version": "0.0.2",
"description": "",

@@ -10,3 +10,4 @@ "main": "lib/index.js",

"scripts": {
"build": "tsc -p tsconfig.json --outDir lib && npx babel src --out-dir lib --extensions='.ts' --extensions='.tsx' --copy-files --ignore [ '**/*.md' ]",
"prepublishOnly": "npm run build",
"build": "tsc -p tsconfig.json --outDir lib && npx babel src --out-dir lib --extensions='.ts' --extensions='.tsx' --copy-files",
"dev": "webpack serve --config webpack/development.config.js",

@@ -13,0 +14,0 @@ "lint": "eslint . --ext .ts --ext .tsx",