@agility/plenum-ui 1.0.0

package/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    ["@babel/preset-react"],
+    ["@babel/preset-typescript"]
+  ]
+}

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.eslintrc

@@ -0,0 +1,13 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended",
+      "prettier"
+    ]
+  }

package/.github/workflows/test.yml

@@ -0,0 +1,27 @@
+# This workflow will do a clean install of node dependencies run tests across different on of node 12.x
+
+name: Component test CI
+
+on:
+  pull_request:
+    types:
+      - opened
+    branches:    
+      - 'main'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+    "singleQuote": true,
+    "printWidth": 100,
+    "editor.formatOnSave": true,
+    "proseWrap": "always",
+    "tabWidth": 4,
+    "requireConfig": false,
+    "useTabs": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "semi": true
+}

package/.storybook/Layout.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import '../src/tailwind.css';
+import '../src/font.css';
+
+const Layout = ({ children }) => {
+    return <div className="p5 min-w-[320px] font-muli">{children}</div>;
+};
+
+export default Layout;

package/.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+    stories: ['../src/**/*.stories.tsx'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-a11y',
+        'storybook-addon-mock/register',
+        {
+            name: '@storybook/addon-postcss',
+            options: {
+                postcssLoaderOptions: {
+                    implementation: require('postcss')
+                }
+            }
+        }
+    ]
+};

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import plenumTheme from './plenumTheme';
+
+addons.setConfig({
+  theme: plenumTheme,
+});

package/.storybook/plenumTheme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming';
+
+export default create({
+    base: 'light',
+    brandTitle: 'Agility Plenum UI',
+    brandUrl: 'https://plenum-ui.vercel.app/',
+    brandImage: 'https://cdn.agilitycms.com/content-manager/images/logos/agility-logo-storybook-350.png'
+});

package/.storybook/preview.js

@@ -0,0 +1,44 @@
+
+import React from 'react';
+import { addDecorator } from '@storybook/react';
+//import { withInfo } from '@storybook/addon-info';
+
+import Layout from './Layout';
+
+addDecorator(storyFn => <Layout>{storyFn()}</Layout>);
+// addDecorator(withInfo({
+//   inline: true,
+//   propTablesExclude: [Layout]
+// }));
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  layout: 'centered',
+  backgrounds: {
+    default: 'agility white',
+    values: [
+      {
+        name: 'agility white',
+        value: '#ffffff',
+      },
+      {
+        name: 'agility yellow',
+        value: '#FFCB28',
+      },
+      {
+        name: 'agility purple',
+        value: '#4600A8',
+      },
+      {
+        name: 'agility dark blue',
+        value: '#2A3846',
+      },
+    ],
+  },
+}

package/README.md

@@ -0,0 +1,17 @@
+# Agility CMS Component Library for React
+
+## PRE-RELEASE!
+
+## Commands
+
+Build for distribution
+
+```
+yarn build
+```
+
+Run storybook
+
+```
+yarn start-tw & yarn storybook
+```

package/_templates/component/new/component.ejs.t

@@ -0,0 +1,18 @@
+---
+to: src/components/<%= h.capitalize(name) %>/<%= h.capitalize(name) %>.tsx
+---
+import React, { FC } from 'react';
+import { default as cn } from 'classnames';
+
+export interface <%= h.capitalize(name) %>Props {
+    /** Prop comment */
+    prop: string;
+}
+
+/** Comment */
+export const <%= h.capitalize(name) %>: FC<<%= h.capitalize(name) %>Props> = ({prop}: <%= h.capitalize(name) %>Props) => {
+
+    return (
+        <div><%= h.capitalize(name) %> component {prop}</div>
+    );
+};

package/_templates/component/new/component.stories.ejs.t

@@ -0,0 +1,21 @@
+---
+to: src/components/<%= h.capitalize(name) %>/<%= h.capitalize(name) %>.stories.tsx
+---
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+import { Story } from '@storybook/react';
+import { <%= h.capitalize(name) %>, <%= h.capitalize(name) %>Props } from './<%= h.capitalize(name) %>';
+import { BRAND_CONFIG } from "../../common";
+
+export default {
+    title: `${BRAND_CONFIG.brandTitle}/Components/<%= h.capitalize(name) %>`,
+    component: <%= h.capitalize(name) %>
+} as Meta;
+
+const Template: Story<<%= h.capitalize(name) %>Props> = (args) => <<%= h.capitalize(name) %> {...args} />;
+const baseArgs = {
+    
+} as <%= h.capitalize(name) %>Props;
+
+export const <%= h.capitalize(name) %>Component = Template.bind({});
+<%= h.capitalize(name) %>Component.args = {prop: 'prop'};

package/_templates/component/new/component.test.ejs.t

@@ -0,0 +1,15 @@
+---
+to: src/components/<%= h.capitalize(name) %>/<%= h.capitalize(name) %>.test.tsx
+---
+import React from 'react';
+import { shallow } from 'enzyme'
+import { <%= h.capitalize(name) %> } from './<%= h.capitalize(name) %>'
+
+describe('<%= h.capitalize(name) %> component', () => {
+    it('should', () => {
+        // setup
+        // const <%= name.toLowerCase() %> = shallow(<<%= h.capitalize(name) %>  prop="prop" />);
+        // test
+        // expect(<%= name.toLowerCase() %>.text()).toEqual('');
+    });
+})

package/_templates/component/new/index.ejs.t

@@ -0,0 +1,6 @@
+---
+to: src/components/<%= h.capitalize(name) %>/index.ts
+---
+export * from './<%= h.capitalize(name) %>'
+
+

package/_templates/component/new/prompt.js

@@ -0,0 +1,7 @@
+module.exports = [
+    {
+        type: 'input',
+        name: 'name',
+        message: 'Component name?'
+    }
+];

package/coverage/Forms/TextInputSelect/InputSelect/InputSelect.tsx.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Code coverage report for Forms/TextInputSelect/InputSelect/InputSelect.tsx</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="../../../prettify.css" />
+        <link rel="stylesheet" href="../../../base.css" />
+        <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style type="text/css">
+            .coverage-summary .sorter {
+                background-image: url(../../../sort-arrow-sprite.png);
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class="wrapper">
+            <div class="pad1">
+                <h1>
+                    <a href="../../../index.html">All files</a> /
+                    <a href="index.html">Forms/TextInputSelect/InputSelect</a> InputSelect.tsx
+                </h1>
+                <div class="clearfix">
+                    <div class="fl pad1y space-right2">
+                        <span class="strong">95% </span>
+                        <span class="quiet">Statements</span>
+                        <span class="fraction">19/20</span>
+                    </div>
+
+                    <div class="fl pad1y space-right2">
+                        <span class="strong">66.66% </span>
+                        <span class="quiet">Branches</span>
+                        <span class="fraction">6/9</span>
+                    </div>
+
+                    <div class="fl pad1y space-right2">
+                        <span class="strong">100% </span>
+                        <span class="quiet">Functions</span>
+                        <span class="fraction">3/3</span>
+                    </div>
+
+                    <div class="fl pad1y space-right2">
+                        <span class="strong">100% </span>
+                        <span class="quiet">Lines</span>
+                        <span class="fraction">12/12</span>
+                    </div>
+                </div>
+                <p class="quiet">
+                    Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>,
+                    <em>p</em> or <em>k</em> for the previous block.
+                </p>
+                <template id="filterTemplate">
+                    <div class="quiet">
+                        Filter:
+                        <input oninput="onInput()" type="search" id="fileSearch" />
+                    </div>
+                </template>
+            </div>
+            <div class="status-line high"></div>
+            <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</a>
+<a name='L4'></a><a href='#L4'>4</a>
+<a name='L5'></a><a href='#L5'>5</a>
+<a name='L6'></a><a href='#L6'>6</a>
+<a name='L7'></a><a href='#L7'>7</a>
+<a name='L8'></a><a href='#L8'>8</a>
+<a name='L9'></a><a href='#L9'>9</a>
+<a name='L10'></a><a href='#L10'>10</a>
+<a name='L11'></a><a href='#L11'>11</a>
+<a name='L12'></a><a href='#L12'>12</a>
+<a name='L13'></a><a href='#L13'>13</a>
+<a name='L14'></a><a href='#L14'>14</a>
+<a name='L15'></a><a href='#L15'>15</a>
+<a name='L16'></a><a href='#L16'>16</a>
+<a name='L17'></a><a href='#L17'>17</a>
+<a name='L18'></a><a href='#L18'>18</a>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a>
+<a name='L22'></a><a href='#L22'>22</a>
+<a name='L23'></a><a href='#L23'>23</a>
+<a name='L24'></a><a href='#L24'>24</a>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a>
+<a name='L27'></a><a href='#L27'>27</a>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</a>
+<a name='L31'></a><a href='#L31'>31</a>
+<a name='L32'></a><a href='#L32'>32</a>
+<a name='L33'></a><a href='#L33'>33</a>
+<a name='L34'></a><a href='#L34'>34</a>
+<a name='L35'></a><a href='#L35'>35</a>
+<a name='L36'></a><a href='#L36'>36</a>
+<a name='L37'></a><a href='#L37'>37</a>
+<a name='L38'></a><a href='#L38'>38</a>
+<a name='L39'></a><a href='#L39'>39</a>
+<a name='L40'></a><a href='#L40'>40</a>
+<a name='L41'></a><a href='#L41'>41</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { FC, useState } from 'react';
+import { default as cn } from 'classnames';
+import { SelectOptions } from '..';
+&nbsp;
+export interface InputSelectProps {
+    align: 'left' | 'right';
+    /** Show the CTA without Background color and a border seperator */
+    inputOptions: SelectOptions[];
+    /** Onclick callback */
+    onSelectOption?(value: string): void;
+}
+&nbsp;
+/** Comment */
+export const InputSelect: FC&lt;InputSelectProps&gt; = ({ inputOptions, onSelectOption, align = <span class="branch-0 cbranch-no" title="branch not covered" >'right' </span>}: InputSelectProps): JSX.Element | null =&gt; {
+    const [selectedOption, setSelectedOption] = useState&lt;string&gt;(inputOptions[0].value);
+    const handleChange = (e: React.ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
+        const targetValue = e.target.value;
+        onSelectOption &amp;&amp; onSelectOption(targetValue);
+        setSelectedOption(targetValue);
+    };
+    const selectStyle = cn(
+        'relative z-10 inline-flex items-center space-x-2 bg-white px-4 py-2 pr-7 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500',
+        { 'rounded-r-md text-gray-700 -ml-px': align === 'right' },
+        { 'rounded-l-md text-gray-500 -mr-px focus-within:z-10': align === 'left' },
+        { 'cursor-default': !onSelectOption },
+        { 'border-l-white': align === 'right' },
+        { 'border-r-white': align === 'left' }
+    );
+&nbsp;
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (!inputOptions<span class="branch-0 cbranch-no" title="branch not covered" >?.l</span>ength) <span class="cstat-no" title="statement not covered" >return null;</span>
+    return (
+        &lt;select className={selectStyle} onChange={handleChange} value={selectedOption}&gt;
+            {inputOptions.map((option) =&gt; (
+                &lt;option key={option.value} value={option.value}&gt;
+                    {option.label}
+                &lt;/option&gt;
+            ))}
+        &lt;/select&gt;
+    );
+};
+&nbsp;</pre></td></tr></table></pre>
+
+            <div class="push"></div>
+            <!-- for sticky footer -->
+        </div>
+        <!-- /wrapper -->
+        <div class="footer quiet pad2 space-top1 center small">
+            Code coverage generated by
+            <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer"
+                >istanbul</a
+            >
+            at Wed Feb 23 2022 16:23:07 GMT-0500 (Eastern Standard Time)
+        </div>
+        <script src="../../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../../sorter.js"></script>
+        <script src="../../../block-navigation.js"></script>
+    </body>
+</html>

package/coverage/Forms/TextInputSelect/InputSelect/index.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Code coverage report for Forms/TextInputSelect/InputSelect</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="../../../prettify.css" />
+        <link rel="stylesheet" href="../../../base.css" />
+        <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style type="text/css">
+            .coverage-summary .sorter {
+                background-image: url(../../../sort-arrow-sprite.png);
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class="wrapper">
+            <div class="pad1">
+                <h1>
+                    <a href="../../../index.html">All files</a> Forms/TextInputSelect/InputSelect
+                </h1>
+                <div class="clearfix">
+                    <div class="fl pad1y space-right2">
+                        <span class="strong">95% </span>
+                        <span class="quiet">Statements</span>
+                        <span class="fraction">19/20</span>
+                    </div>
+
+                    <div class="fl pad1y space-right2">
+                        <span class="strong">66.66% </span>
+                        <span class="quiet">Branches</span>
+                        <span class="fraction">6/9</span>
+                    </div>
+
+                    <div class="fl pad1y space-right2">
+                        <span class="strong">100% </span>
+                        <span class="quiet">Functions</span>
+                        <span class="fraction">3/3</span>
+                    </div>
+
+                    <div class="fl pad1y space-right2">
+                        <span class="strong">100% </span>
+                        <span class="quiet">Lines</span>
+                        <span class="fraction">12/12</span>
+                    </div>
+                </div>
+                <p class="quiet">
+                    Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>,
+                    <em>p</em> or <em>k</em> for the previous block.
+                </p>
+                <template id="filterTemplate">
+                    <div class="quiet">
+                        Filter:
+                        <input oninput="onInput()" type="search" id="fileSearch" />
+                    </div>
+                </template>
+            </div>
+            <div class="status-line high"></div>
+            <div class="pad1">
+                <table class="coverage-summary">
+                    <thead>
+                        <tr>
+                            <th data-col="file" data-fmt="html" data-html="true" class="file">
+                                File
+                            </th>
+                            <th
+                                data-col="pic"
+                                data-type="number"
+                                data-fmt="html"
+                                data-html="true"
+                                class="pic"
+                            ></th>
+                            <th data-col="statements" data-type="number" data-fmt="pct" class="pct">
+                                Statements
+                            </th>
+                            <th
+                                data-col="statements_raw"
+                                data-type="number"
+                                data-fmt="html"
+                                class="abs"
+                            ></th>
+                            <th data-col="branches" data-type="number" data-fmt="pct" class="pct">
+                                Branches
+                            </th>
+                            <th
+                                data-col="branches_raw"
+                                data-type="number"
+                                data-fmt="html"
+                                class="abs"
+                            ></th>
+                            <th data-col="functions" data-type="number" data-fmt="pct" class="pct">
+                                Functions
+                            </th>
+                            <th
+                                data-col="functions_raw"
+                                data-type="number"
+                                data-fmt="html"
+                                class="abs"
+                            ></th>
+                            <th data-col="lines" data-type="number" data-fmt="pct" class="pct">
+                                Lines
+                            </th>
+                            <th
+                                data-col="lines_raw"
+                                data-type="number"
+                                data-fmt="html"
+                                class="abs"
+                            ></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="file high" data-value="InputSelect.tsx">
+                                <a href="InputSelect.tsx.html">InputSelect.tsx</a>
+                            </td>
+                            <td data-value="95" class="pic high">
+                                <div class="chart">
+                                    <div class="cover-fill" style="width: 95%"></div>
+                                    <div class="cover-empty" style="width: 5%"></div>
+                                </div>
+                            </td>
+                            <td data-value="95" class="pct high">95%</td>
+                            <td data-value="20" class="abs high">19/20</td>
+                            <td data-value="66.66" class="pct medium">66.66%</td>
+                            <td data-value="9" class="abs medium">6/9</td>
+                            <td data-value="100" class="pct high">100%</td>
+                            <td data-value="3" class="abs high">3/3</td>
+                            <td data-value="100" class="pct high">100%</td>
+                            <td data-value="12" class="abs high">12/12</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="push"></div>
+            <!-- for sticky footer -->
+        </div>
+        <!-- /wrapper -->
+        <div class="footer quiet pad2 space-top1 center small">
+            Code coverage generated by
+            <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer"
+                >istanbul</a
+            >
+            at Wed Feb 23 2022 16:23:07 GMT-0500 (Eastern Standard Time)
+        </div>
+        <script src="../../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../../sorter.js"></script>
+        <script src="../../../block-navigation.js"></script>
+    </body>
+</html>