chili-ui 0.0.1

package/docs/src/app/form-helpers/form/page.tsx

@@ -0,0 +1,367 @@
+'use client';
+
+import * as L from '@leda';
+import { Live } from '@/components/live';
+import {
+  CodeBlock, H1, H2, P, Section, THead, Table, Td,
+} from '@/components/typography';
+
+const FormPage = () => (
+  <article>
+    <H1>form</H1>
+
+    <Section>
+      <H2>form interfaces</H2>
+      <Table>
+        <THead headers={['Type', 'Description']} />
+        <tbody>
+          <tr>
+            <Td />
+            <Td>
+              <b>L.form</b> is a function that allows performing actions upon
+            </Td>
+          </tr>
+          <tr>
+            <Td>
+              <CodeBlock>
+                {`(formName: string, fieldNames?: string | string[])
+  => FormFieldsHelpers 
+`}
+              </CodeBlock>
+            </Td>
+            <Td>
+              <ul>
+                <li>- a form</li>
+                <li>- form components</li>
+              </ul>
+            </Td>
+          </tr>
+          <tr>
+            <Td>
+              <CodeBlock>
+                {'(formName: string, fieldName: string) => FormFieldHelpers'}
+              </CodeBlock>
+            </Td>
+            <Td>
+              <ul>
+                <li>- a single form component</li>
+              </ul>
+              <p className="mt-2">depending on the parameters you pass</p>
+            </Td>
+          </tr>
+          <tr>
+            <Td />
+            <Td>
+              <p>
+                L.form() returns a collection of methods
+              </p>
+            </Td>
+          </tr>
+          <tr>
+            <Td>
+              <CodeBlock>
+                {`interface FormFieldHelpers {
+  get: () => FormGetField | undefined,
+  remove: () => void,
+  reset: () => boolean,
+  validate:
+    (warpedValidator?: ExternalValidator | ExternalValidator[])
+      => Field | undefined,
+}
+
+interface FormFieldsHelpers {
+  get: () => FormGetField[],
+  remove: () => void,
+  reset: () => boolean,
+  validate: () => Field[],
+}
+`}
+              </CodeBlock>
+            </Td>
+            <Td>
+              <P>
+                <b>get</b> returns component/form data
+              </P>
+              <P className="mt-2">
+                <b>remove</b> deletes a component or a whole form so they are not avaliable anymore and their data get lost
+              </P>
+              <P className="mt-2">
+                <b>reset</b> resets components to their empty/default state
+              </P>
+              <P className="mt-2">
+                <b>validate</b> triggers validation, no need to submit the form
+              </P>
+            </Td>
+          </tr>
+          <tr>
+            <Td>
+              <CodeBlock>
+                {`interface FormGetField {
+  isFilled: boolean,
+  isRequired: boolean,
+  isValid: boolean,
+  name: string,
+  value: any,
+}
+
+interface Field {
+  invalidMessages?: string[],
+  isRequired: boolean,
+  isValid: boolean,
+  name: string,
+  requiredMessage?: string,
+  reset: () => void,
+  setIsValid: SetState<boolean>,
+  setMessages: SetState<string[] | undefined>,
+  shouldValidateUnmounted: boolean,
+  validators: NormalizedValidatorObject[],
+  value: any,
+}
+
+interface ExternalValidator {
+  validator: Validator | Validator[],
+  invalidMessage?: string,
+}
+`}
+              </CodeBlock>
+            </Td>
+            <Td>Some more interfaces</Td>
+          </tr>
+        </tbody>
+      </Table>
+    </Section>
+
+    <Section>
+      <H2>Single form field manipulations</H2>
+
+      <Live scope={{ L }}>
+        {`
+() => {
+  return (
+    <>
+      <L.Input
+        form='test-form-1'
+        name='test-form-input-1'
+        _w-48
+        _mb-4
+      />
+
+      <L.Input
+        form='test-form-1'
+        name='test-form-input-2'
+        _w-48
+        _mb-4
+      />
+
+      <L.Input
+        form='test-form-1'
+        name='test-form-input-3'
+        _w-48
+        _mb-4
+      />
+
+      <L.CheckBox
+        form='test-form-1'
+        name='test-check-box'
+        defaultValue={true}
+        _w-48
+        _mb-4
+      >
+        CheckBox
+      </L.CheckBox>
+
+      <L.Button
+        form='test-form-1'
+        onClick={({ form }) => console.log(form)}
+      >
+        Submit 
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-1', 'test-form-input-1').get())}
+        _ml-4
+      >
+        get
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-1', 'test-form-input-1').validate())}
+        _ml-4
+      >
+        validate
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-1', 'test-form-input-1').reset())}
+        _ml-4
+      >
+        reset input
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-1', 'test-check-box').reset())}
+        _ml-4
+      >
+        reset check box
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-1').reset())}
+        _ml-4
+      >
+        reset form
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-1', 'test-form-input-1').remove())}
+        _ml-4
+      >
+        remove
+      </L.Button>
+    </>
+  );
+}`}
+      </Live>
+    </Section>
+
+    <Section>
+      <H2>Multiple form fields manipulations</H2>
+
+      <Live scope={{ L }}>
+        {`
+() => {
+  return (
+    <>
+      <L.Input
+        form='test-form-2'
+        name='test-form-input-1'
+        _w-48
+        _mb-4
+      />
+
+      <L.Input
+        form='test-form-2'
+        name='test-form-input-2'
+        _w-48
+        _mb-4
+      />
+
+      <L.Input
+        form='test-form-2'
+        name='test-form-input-3'
+        _w-48
+        _mb-4
+      />
+
+      <L.Button
+        form='test-form-2'
+        onClick={({ form }) => console.log(form)}
+      >
+        Submit 
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-2', ['test-form-input-1', 'test-form-input-2']).get())}
+        _ml-4
+      >
+        get
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-2', ['test-form-input-1', 'test-form-input-2']).validate())}
+        _ml-4
+      >
+        validate
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-2', ['test-form-input-1', 'test-form-input-2']).reset())}
+        _ml-4
+      >
+        reset
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-2', ['test-form-input-1', 'test-form-input-2']).remove())}
+        _ml-4
+      >
+        remove
+      </L.Button>
+    </>
+  );
+}`}
+      </Live>
+    </Section>
+
+    <Section>
+      <H2>Whole form manipulations</H2>
+
+      <Live scope={{ L }}>
+        {`
+() => {
+  return (
+    <>
+      <L.Input
+        form='test-form-3'
+        name='test-form-input-1'
+        _w-48
+        _mb-4
+      />
+
+      <L.Input
+        form='test-form-3'
+        name='test-form-input-2'
+        _w-48
+        _mb-4
+      />
+
+      <L.Input
+        form='test-form-3'
+        name='test-form-input-3'
+        _w-48
+        _mb-4
+      />
+
+      <L.Button
+        form='test-form-3'
+        onClick={({ form }) => console.log(form)}
+      >
+        Submit 
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-3').get())}
+        _ml-4
+      >
+        get
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-3').validate())}
+        _ml-4
+      >
+        validate
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-3').reset())}
+        _ml-4
+      >
+        reset
+      </L.Button>
+
+      <L.Button
+        onClick={() => console.log(L.form('test-form-3').remove())}
+        _ml-4
+      >
+        remove
+      </L.Button>
+    </>
+  );
+}`}
+      </Live>
+    </Section>
+  </article>
+);
+
+export default FormPage;

package/docs/src/app/form-helpers/validate/page.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+/* eslint-disable react/jsx-curly-brace-presence */
+
+import * as L from '@leda';
+import { Live } from '@/components/live';
+import {
+  Code, H1, H2, P, Section, THead, Table, Td, propsTableCommonHeaders,
+} from '@/components/typography';
+
+const ValidatePage = () => (
+  <article>
+    <H1>validate</H1>
+
+    <P>
+      <b>validate</b> exports a few methods that help validating a value
+    </P>
+
+    <P>
+      <Code>{'import { validate } from leda'}</Code>
+    </P>
+
+    <P>or</P>
+
+    <P>
+      <Code>import * as L from leda</Code>
+      <br />
+      <Code>{"L.validate.email('123@gmial.com')"}</Code>
+    </P>
+
+    <Section>
+      <H2>Common validators</H2>
+      <Table>
+        <THead headers={propsTableCommonHeaders} />
+        <tbody>
+          <tr>
+            <Td colSpan={3} />
+          </tr>
+          <tr>
+            <Td>email</Td>
+            <Td>{'(email: string) => boolean'}</Td>
+            <Td>...</Td>
+          </tr>
+          <tr>
+            <Td>url</Td>
+            <Td>{'(url: string) => boolean'}</Td>
+            <Td>...</Td>
+          </tr>
+          <tr>
+            <Td>creditCardNumber</Td>
+            <Td>{'(cardNumber: string) => boolean'}</Td>
+            <Td>...</Td>
+          </tr>
+        </tbody>
+      </Table>
+    </Section>
+
+    <Live scope={{ L }}>
+      {`
+() => {
+  return (
+    <>
+      <L.Button
+        onClick={() => {
+          const number = prompt('Enter a card number')
+          const isValid = L.validate.creditCardNumber(number)
+          const result = isValid ? 'valid' : 'not valid'
+          alert('The card number is ' + result)
+        }}
+      >
+        click to validate your card number *
+      </L.Button>
+
+      <p className='text-xs mt-4'>
+        * It is safe, validation takes place on the frontend side only, no data are stored or trasferred anywhere.
+      </p>
+    </>
+  );
+}`}
+    </Live>
+  </article>
+);
+
+export default ValidatePage;

package/docs/src/app/globals.css

@@ -0,0 +1,32 @@
+@import url(../../../dist/styles/leda.base.css);
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+} */
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+/* rewrite tailwind default styles */
+/* button, [type='button'], [type='reset'], [type='submit'] {
+  background-color: var(--ld-btn-bg-color);
+} */

package/docs/src/app/layout-components/collapse/MainDemo/BasicDemo.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+/* eslint-disable max-len */
+import * as L from '@leda';
+import React from 'react';
+import { Live } from '@/components/live';
+
+export const BasicDemo = () => (
+  <Live scope={{ L }}>
+    {`
+() => {
+  return (
+    <>
+      <L.Collapse
+        summary="Summary"
+      >
+        <L.P _text-green-800>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+        </L.P>
+      </L.Collapse>
+    </>
+  )  
+}`}
+  </Live>
+);

package/docs/src/app/layout-components/collapse/MainDemo/ControlledDemo.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+/* eslint-disable max-len */
+import * as L from '@leda';
+import React from 'react';
+import { Live } from '@/components/live';
+
+export const ControlledDemo = () => (
+  <Live scope={{ L }}>
+    {`
+() => {
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  return (
+    <>
+      <L.Button
+        onClick={() => setIsOpen(!isOpen)}
+        _mb-4
+      >
+        Toogle Collapse
+      </L.Button>
+
+      <L.Collapse
+        isOpen={isOpen}
+        onToggle={(ev) => setIsOpen(ev.isOpen)}
+        summary="Summary"
+      >
+        <L.P _text-green-800>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+        </L.P>
+      </l.Collapse>  
+    </>
+  );
+}`}
+  </Live>
+);

package/docs/src/app/layout-components/collapse/MainDemo/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as L from '@leda';
+import React from 'react';
+import { BasicDemo } from './BasicDemo';
+import { ControlledDemo } from './ControlledDemo';
+
+export const MainDemo = () => {
+  const [selected, setSelected] = React.useState<string | number>(0);
+
+  return (
+    <L.Tabs
+      activeTabKey={selected}
+      onChange={(ev) => setSelected(ev.component.value)}
+      _my-6
+    >
+      <L.Tab title="Basic" tabKey={0}>
+        <BasicDemo />
+      </L.Tab>
+      <L.Tab title="Controlled" tabKey={1}>
+        <ControlledDemo />
+      </L.Tab>
+    </L.Tabs>
+  );
+};

package/docs/src/app/layout-components/collapse/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { H1, Td } from '@/components/typography';
+import { PropsTableSection } from '@/sections';
+import { ShouldRender, UnderscoreClasses } from '@/components/commonProps';
+import { MainDemo } from './MainDemo';
+
+const CollapsePage = () => (
+  <article>
+    <H1>Collapse</H1>
+
+    <PropsTableSection>
+      <tr>
+        <Td><b>children</b></Td>
+        <Td>React.ReactNode</Td>
+        <Td>Content</Td>
+      </tr>
+      <tr>
+        <Td>isOpen</Td>
+        <Td>boolean</Td>
+        <Td>Component state (controlled mode)</Td>
+      </tr>
+      <tr>
+        <Td>onToggle</Td>
+        <Td>{'(ev: { isOpen: boolean }) => void'}</Td>
+        <Td>Toggle handler, the event contains the new state</Td>
+      </tr>
+      <ShouldRender />
+      <tr>
+        <Td>summary</Td>
+        <Td>React.ReactNode</Td>
+        <Td>Collapse summary</Td>
+      </tr>
+      <UnderscoreClasses />
+    </PropsTableSection>
+
+    <MainDemo />
+
+  </article>
+);
+
+export default CollapsePage;