@newtonschool/grauity 0.0.1

package/ui/elements/Icon/index.ts

@@ -0,0 +1,3 @@
+export type { IconProps } from './Icon';
+
+export { default as Icon } from './Icon';

package/ui/elements/index.ts

@@ -0,0 +1,2 @@
+export type { IconProps } from './Icon';
+export { Icon } from './Icon';

package/ui/helpers/README.md

@@ -0,0 +1,3 @@
+# helpers
+
+The purpose fo the directory is to contain all the common utils required by the library

package/ui/helpers/classNameBuilders.ts

@@ -0,0 +1,48 @@
+/*
+ * There are 3 prop patterns used to build up the className for a component.
+ * Each utility here is meant for use in a classnames() argument.
+ *
+ * There is no util for valueOnly() because it would simply return val.
+ * Use the prop value inline instead.
+ *   <Label size='big' />
+ *   <div class="ui big label"></div>
+ */
+
+/**
+ * Props where only the prop key is used in the className.
+ * @param {*} val A props value
+ * @param {string} key A props key
+ *
+ * @example
+ * <Label tag />
+ * <div class="ui tag label"></div>
+ */
+export const useKeyOnly = (val: any, key: string) => val && key;
+
+/**
+ * Props that require both a key and value to create a className.
+ * @param {*} val A props value
+ * @param {string} key A props key
+ *
+ * @example
+ * <Label corner='left' />
+ * <div class="ui left corner label"></div>
+ */
+export const useValueAndKey = (val: any, key: string) =>
+    val && val !== true && `${val}-${key}`;
+
+/**
+ * Props whose key will be used in className, or value and key.
+ * @param {*} val A props value
+ * @param {string} key A props key
+ *
+ * @example Key Only
+ * <Label pointing />
+ * <div class="ui pointing label"></div>
+ *
+ * @example Key and Value
+ * <Label pointing='left' />
+ * <div class="ui left pointing label"></div>
+ */
+export const useKeyOrValueAndKey = (val: any, key: string) =>
+    val && (val === true ? key : `${val}-${key}`);

package/ui/helpers/getElementTypeFromProps.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+/**
+ * Returns a createElement() type based on the props of the Component.
+ * Useful for calculating what type a component should render as.
+ *
+ * @param {object} props A ReactElement props object
+ * @returns {string|function} A ReactElement type
+ */
+
+function getElementTypeFromProps(props: {
+    as: React.ElementType;
+    href?: string;
+}) {
+    // ----------------------------------------
+    // user defined "as" element type
+
+    if (props.as) return styled(props.as)``;
+
+    // ----------------------------------------
+    // infer anchor links
+
+    if (props.href) return styled('a')``;
+
+    // ----------------------------------------
+    // use defaultProp or 'div'
+
+    return styled('div')``;
+}
+
+export default getElementTypeFromProps;

package/ui/helpers/index.ts

@@ -0,0 +1,13 @@
+import getElementTypeFromProps from './getElementTypeFromProps';
+import {
+    useKeyOnly,
+    useKeyOrValueAndKey,
+    useValueAndKey,
+} from './classNameBuilders';
+
+export {
+    useKeyOnly,
+    useValueAndKey,
+    useKeyOrValueAndKey,
+    getElementTypeFromProps,
+};

package/ui/index.ts

@@ -0,0 +1,9 @@
+import './css/index.scss';
+
+export { ICON_TAGS, TAG_ICONS } from './core';
+
+export type { GrauityInitProps } from './init';
+export { GrauityInit } from './init';
+
+export type { IconProps } from './elements';
+export { Icon } from './elements';

package/ui/init/GrauityInit.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import { getElementTypeFromProps } from '../helpers';
+
+export interface GrauityInitProps {
+    /**
+     * An element type to render as (string or function).
+     * */
+    as: React.ElementType;
+
+    /**
+     * The font size to be applied on this element and so will act as standard for the `ems` of all grauity components.
+     * */
+    fontSize: string;
+
+    /**
+     * The multiplier is multiplied will all the `ems` of the grauity components.
+     * */
+    multiplier?: number;
+
+    /**
+     * The children to be rendered inside this component.
+     * */
+    children?: React.ReactNode;
+}
+
+/**
+ * This component is used to initialize the Grauity library. Ideally, it should be the root component of your application.
+ * But nonetheless all the grauity components should be the children of this component.
+ * */
+function GrauityInit({ as, fontSize, multiplier, children }: GrauityInitProps) {
+    const ElementType = getElementTypeFromProps({ as });
+
+    return (
+        <ElementType
+            className="grauity-init"
+            style={{
+                fontSize,
+                '--multiplier': multiplier,
+            }}
+        >
+            {children}
+        </ElementType>
+    );
+}
+
+GrauityInit.propTypes = {
+    as: PropTypes.elementType,
+    fontSize: PropTypes.string,
+    multiplier: PropTypes.number,
+    children: PropTypes.node,
+};
+
+GrauityInit.defaultProps = {
+    as: 'div',
+    fontSize: '16px',
+    multiplier: 1,
+    children: null,
+};
+
+export default GrauityInit;

package/ui/init/index.ts

@@ -0,0 +1,3 @@
+export type { GrauityInitProps } from './GrauityInit';
+
+export { default as GrauityInit } from './GrauityInit';