chili-ui 0.0.1

package/docs/src/app/form-components/autocomplete/page.tsx

@@ -0,0 +1,331 @@
+'use client';
+
+/* eslint-disable react/jsx-curly-brace-presence */
+
+import * as L from '@leda';
+import {
+  H1, H2, Section, Table, Th, Td, TdCode, P, A,
+} from '@/components/typography';
+import { Live } from '@/components/live';
+import { CustomizationPropsTableSection, PropsTableSection, ValidationSection } from '@/sections';
+import { UnderscoreClasses } from '@/components/commonProps';
+import { PATHS } from '@/constants';
+import { MainDemo } from './MainDemo';
+
+const AutoCompletePage = () => (
+  <article>
+    <H1>AutoComplete</H1>
+    <PropsTableSection>
+      <tr>
+        <TdCode>autoComplete</TdCode>
+        <TdCode>string</TdCode>
+        <Td>
+          <p>Browser autofill, off is the default value.</p>
+          <p>Works as&nbsp;
+            <a
+              href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete"
+              target="_blank"
+              className="text-cyan-700 underline"
+              rel="noreferrer"
+            >
+              HTML autoComplete attribute
+            </a>
+          </p>
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>
+          <b>data</b>
+        </TdCode>
+        <TdCode>
+          T[]
+        </TdCode>
+        <Td>
+          Data for the dropdown list.
+          <br />
+          If <b>data</b> is an array of objects, use <b>textField</b> to specify
+          which {"object's"} field should be used as text for the dropdown items
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>defaultValue</TdCode>
+        <TdCode>string | null</TdCode>
+        <Td>Default value for the uncontrolled mode</Td>
+      </tr>
+      <tr>
+        <TdCode>isDisabled</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>Disable the component</Td>
+      </tr>
+      <tr>
+        <TdCode>filterRule</TdCode>
+        <TdCode>{"'smart' | 'startsWith' | 'includes'"}</TdCode>
+        <Td>
+          Search mode, <b>smart</b> is default, looks for one or several words regardless of their order,
+          can be slow if <b>data</b> has thousands of elements or more
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>hasClearButton</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>
+          Whether or not to show a clear button inside the input element.
+          Default is <b>false</b>
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>isLoading</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>Display a loading icon inside the dropdown</Td>
+      </tr>
+      <tr>
+        <TdCode>isOpen</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>Control the dropdown state</Td>
+      </tr>
+      <tr>
+        <TdCode>isRequired</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>Validate the component as a required field</Td>
+      </tr>
+      <tr>
+        <TdCode>maxLength</TdCode>
+        <TdCode>number</TdCode>
+        <Td>Max number of characters</Td>
+      </tr>
+      <tr>
+        <TdCode>messages</TdCode>
+        <TdCode>
+          {
+`AutoCompleteMessages
+
+====
+
+interface AutoCompleteMessages {
+  nothingFound: React.ReactNode,
+}`
+          }
+        </TdCode>
+        <Td>
+          <P>
+            Customize component text labels
+          </P>
+          <P>
+            Consider using <A href={PATHS.ledaProvider}>Leda provider</A> to set messages globally.
+          </P>
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>minSearchLength</TdCode>
+        <TdCode>number</TdCode>
+        <Td>The minimal number of symbols that triggers the dropdown opening</Td>
+      </tr>
+      <tr>
+        <TdCode>name</TdCode>
+        <TdCode>string</TdCode>
+        <Td>A component name</Td>
+      </tr>
+      <tr>
+        <TdCode>onBlur</TdCode>
+        <TdCode>
+          (event: BlurEvent) ={'>'} void
+        </TdCode>
+        <Td>Blur handler</Td>
+      </tr>
+      <tr>
+        <TdCode>onChange</TdCode>
+        <TdCode>(event: ChangeEvent{'<'}T{'>'}) ={'>'} void</TdCode>
+        <Td>Value change handler</Td>
+      </tr>
+      <tr>
+        <TdCode>onFocus</TdCode>
+        <TdCode>(event: FocusEvent) ={'>'} void</TdCode>
+        <Td>Focus handler</Td>
+      </tr>
+      <tr>
+        <TdCode>placeholder</TdCode>
+        <TdCode>string</TdCode>
+        <Td>Placeholder</Td>
+      </tr>
+      <tr>
+        <TdCode>shouldCorrectValue</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>
+          Puts the last correct (present in <b>data</b>) value into the input field or leaves it empty.
+          Is triggered by a blur event
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>shouldShowAllSuggestions</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>Show all <b>data</b> elements regardless of what is in the input field</Td>
+      </tr>
+      <tr>
+        <TdCode>shouldShowNothingFound</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>False is default, pass true to enable Nothing found message</Td>
+      </tr>
+      <tr>
+        <TdCode>searchFields</TdCode>
+        <TdCode>string[]</TdCode>
+        <Td>
+          You can use any of the <b>data</b> {"object's"} fields for seraching
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>sortSuggestions</TdCode>
+        <TdCode>(a: T, b: T) ={'>'} number</TdCode>
+        <Td>Sort dropdown items</Td>
+      </tr>
+      <tr>
+        <TdCode>textField</TdCode>
+        <TdCode>T extends object ? string : never</TdCode>
+        <Td>
+          It is mandatory if <b>data</b> is an array of objects, <b>textField</b> specifies which {"object's"} field is used to get dropdown item text value.
+          No effect if <b>data</b> is an array of strings
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>value</TdCode>
+        <TdCode>string | null</TdCode>
+        <Td>Component value</Td>
+      </tr>
+      <UnderscoreClasses />
+    </PropsTableSection>
+
+    <MainDemo />
+
+    <ValidationSection
+      form
+      isValid
+      isRequired
+      invalidMessage
+      name
+      requiredMessage
+      shouldValidateUnmounted
+      validator
+    />
+
+    <Live scope={{ L }}>
+      {`<>
+<L.AutoComplete
+  data={['Argentina', 'Spain']}
+  onChange={({ component }) => console.log(component.value)}
+  form='autocomplete_form'
+  name='autocomplete'
+  isRequired
+  requiredMessage='Please enter something'
+  validator={(val) => val.length > 3}
+  invalidMessage='No less than 4 symbols'
+  _w-48
+/>
+<br />
+<L.Button
+  form='autocomplete_form'
+  onClick={({ form }) => console.log(form)}
+>
+  Click me
+</L.Button>
+</>`}
+    </Live>
+
+    <CustomizationPropsTableSection>
+      <tr>
+        <TdCode>
+          itemRender <br />
+          inputRender <br />
+          invalidMessageRender <br />
+          listRender <br />
+          noSuggestionsRender
+        </TdCode>
+        <TdCode>
+          {`({
+  Element,
+  elementprops,
+  componentProps,
+  componentState
+}): React.ReactNode`}
+        </TdCode>
+        <Td>Customization</Td>
+      </tr>
+    </CustomizationPropsTableSection>
+
+    <Live scope={{ L }}>
+      {`
+<L.AutoComplete
+  noSuggestionsRender={({ elementProps }) => (
+    <div {...elementProps}>
+      <div className='text-amber-400 font-bold'>
+        no suggestions found
+      </div>
+    </div>
+  )}
+  data={['Argentina', 'Spain']}
+  onChange={({ component }) => console.log(component.value)}
+  _w-48
+/>
+        `}
+    </Live>
+
+    <Section>
+      <H2>Suggestions list theme</H2>
+
+      <Table>
+        <thead>
+          <tr>
+            <Th>Theme prop</Th>
+            <Th>CSS class name</Th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <TdCode>container</TdCode>
+            <TdCode>ld-suggestion-wrapper</TdCode>
+          </tr>
+          <tr>
+            <TdCode>containerVisible</TdCode>
+            <TdCode>ld-visible</TdCode>
+          </tr>
+          <tr>
+            <TdCode>containerTop</TdCode>
+            <TdCode>ld-pos-top</TdCode>
+          </tr>
+          <tr>
+            <TdCode>group</TdCode>
+            <TdCode>ld-suggestion-group</TdCode>
+          </tr>
+          <tr>
+            <TdCode>groupLabel</TdCode>
+            <TdCode>ld-suggestion-group-label</TdCode>
+          </tr>
+          <tr>
+            <TdCode>item</TdCode>
+            <TdCode>ld-suggestion-item</TdCode>
+          </tr>
+          <tr>
+            <TdCode>itemHighlighted</TdCode>
+            <TdCode>ld-highlighted</TdCode>
+          </tr>
+          <tr>
+            <TdCode>itemPlaceholder</TdCode>
+            <TdCode>ld-placeholder</TdCode>
+          </tr>
+          <tr>
+            <TdCode>itemSelected</TdCode>
+            <TdCode>ld-selected</TdCode>
+          </tr>
+          <tr>
+            <TdCode>list</TdCode>
+            <TdCode>ld-suggestion-list</TdCode>
+          </tr>
+          <tr>
+            <TdCode>noSuggections</TdCode>
+            <TdCode>ld-nodata</TdCode>
+          </tr>
+        </tbody>
+      </Table>
+    </Section>
+  </article>
+);
+
+export default AutoCompletePage;

package/docs/src/app/form-components/button/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Button } from '@leda';
+import { ShouldRender, UnderscoreClasses } from '@/components/commonProps';
+import {
+  H1, H2, Td, TdCode,
+} from '@/components/typography';
+import { Live } from '@/components/live';
+import { PropsTableSection } from '@/sections';
+import { ButtonValidationPropsTable } from '@/sections/ValidationSection';
+
+const ButtonPage = () => (
+  <article>
+    <H1>Button</H1>
+
+    <PropsTableSection>
+      <tr>
+        <TdCode>isDisabled</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>Disabled state</Td>
+      </tr>
+      <tr>
+        <TdCode>isLoading</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>Loading state</Td>
+      </tr>
+      <tr>
+        <TdCode>onClick</TdCode>
+        <TdCode>
+          (event: SyntheticBaseEvent) ={'>'} void
+        </TdCode>
+        <Td>Click handler</Td>
+      </tr>
+      <ShouldRender />
+      <tr>
+        <TdCode>theme</TdCode>
+        <TdCode>
+          ...
+        </TdCode>
+        <Td />
+      </tr>
+      <tr>
+        <TdCode>type</TdCode>
+        <TdCode>{"React.ButtonHTMLAttributes<{}>['type']"}</TdCode>
+        <Td>Button type</Td>
+      </tr>
+      <UnderscoreClasses />
+    </PropsTableSection>
+
+    <Live scope={{ Button }}>
+      {
+          `
+<Button
+  
+>
+  Hello World!
+</Button>
+  `
+        }
+    </Live>
+
+    <H2>Validation props</H2>
+    <ButtonValidationPropsTable />
+  </article>
+);
+
+export default ButtonPage;

package/docs/src/app/form-components/button-group/page.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+/* eslint-disable react/jsx-curly-brace-presence */
+
+import { Button, ButtonGroup } from '@leda';
+import { ShouldRender, UnderscoreClasses } from '@/components/commonProps';
+import { H1, Td, TdCode } from '@/components/typography';
+import { Live } from '@/components/live';
+import { ValidationSection } from '@/sections/ValidationSection';
+import { PropsTableSection } from '@/sections';
+
+const ButtonGroupPage = () => (
+  <article>
+    <H1>ButtonGroup</H1>
+
+    <PropsTableSection>
+      <tr>
+        <TdCode>data</TdCode>
+        <TdCode>ArrayElement{'<T>'}[]</TdCode>
+        <Td>
+          Buttons data, an array of strings, numbers or objects.
+          Use <b>textField</b> attribute with objects.
+          Two or more buttons with the same text are not allowed
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>defaultValue</TdCode>
+        <TdCode>Value | Value[]</TdCode>
+        <Td>Default value</Td>
+      </tr>
+      <tr>
+        <TdCode>isDisabled</TdCode>
+        <TdCode>boolean</TdCode>
+        <Td>Disabled state</Td>
+      </tr>
+      <tr>
+        <TdCode>onChange</TdCode>
+        <TdCode>(ev: ChangeEvent{'<T>'}) ={'>'} void</TdCode>
+        <Td>Change handler</Td>
+      </tr>
+      <tr>
+        <TdCode>onClick</TdCode>
+        <TdCode>
+          (event: SubmitEvent) ={'>'} void
+        </TdCode>
+        <Td>Click handler</Td>
+      </tr>
+      <ShouldRender />
+      <tr>
+        <TdCode>textField</TdCode>
+        <TdCode>string</TdCode>
+        <Td>Text field in <b>data</b> objects</Td>
+      </tr>
+      <tr>
+        <TdCode>theme</TdCode>
+        <TdCode>...</TdCode>
+        <Td />
+      </tr>
+      <tr>
+        <TdCode>type</TdCode>
+        <TdCode>{"'radio' | 'checkbox'"}</TdCode>
+        <Td>
+          Only one active button is allowed in the <i>radio</i> mode.
+          Use <i>checkbox</i> if you want many.
+          <i>radio</i> is default
+        </Td>
+      </tr>
+      <tr>
+        <TdCode>value</TdCode>
+        <TdCode>T</TdCode>
+        <Td>The value, makes the component controllable</Td>
+      </tr>
+      <UnderscoreClasses />
+    </PropsTableSection>
+
+    <Live scope={{ ButtonGroup }}>
+      {
+          `
+<ButtonGroup
+  data={[
+    { text: 'One', val: 1 },
+    { text: 'Two', val: 2 },
+    { text: 'Three', val: 3 }
+  ]}
+  textField='text'
+  onChange={({ component }) => console.log(component.value)}
+/>`
+        }
+    </Live>
+
+    <ValidationSection
+      form
+      isValid
+      isRequired
+      invalidMessage
+      name
+      requiredMessage
+      shouldValidateUnmounted
+      validator
+    />
+
+    <Live scope={{ ButtonGroup, Button }}>
+      {`<>
+<ButtonGroup
+  form='myForm'
+  name='myComponent'
+  data={[
+    { text: 'One', val: 1 },
+    { text: 'Two', val: 2 },
+    { text: 'Three', val: 3 }
+  ]}
+  textField='text'
+  onChange={({ component }) => console.log(component.value)}
+  type='checkbox'
+  isRequired
+  requiredMessage='Choose something'
+  validator={(val) => val.length >=2}
+  invalidMessage='choose at least two values'
+/>
+<br />
+<Button
+  form='myForm'
+  onClick={({ form }) => console.log(form)}
+>
+  Submit
+</Button>
+</>`}
+    </Live>
+  </article>
+);
+
+export default ButtonGroupPage;

package/docs/src/app/form-components/calendar/_demo/Controlled.tsx

@@ -0,0 +1,27 @@
+import { Calendar } from '@leda/index';
+import { Live } from '@/components/live';
+
+export const Controlled = () => (
+  <div>
+    <Live scope={{ Calendar }}>
+      {
+          `
+() => {
+
+  const [value, setValue] = React.useState()
+
+  return (
+    <Calendar
+      value={value}
+      onChange={({ component }) => {
+        setValue(value)
+        console.log(component.value)
+      }}
+    />
+  )
+}
+  `
+        }
+    </Live>
+  </div>
+);

package/docs/src/app/form-components/calendar/_demo/Form.tsx

@@ -0,0 +1,37 @@
+import * as L from '@leda';
+import { Live } from '@/components/live';
+import { log } from '@/utils';
+
+export const Form = () => (
+  <div>
+    <Live scope={{ L, log }}>
+      {
+          `
+() => {
+  return (
+    <>
+      <L.Calendar
+        form="calendar-form"
+        name="calendar"
+        onChange={({ component }) => console.log(component.value)}
+        _mb-6
+      />
+
+      <L.Button
+        form="calendar-form"
+        onClick={({ form }) => {
+          const formData = form['calendar-form']
+
+          log(formData)
+        }}
+      >
+        Submit
+      </L.Button>
+    </>
+  )
+}
+  `
+        }
+    </Live>
+  </div>
+);

package/docs/src/app/form-components/calendar/_demo/Required.tsx

@@ -0,0 +1,39 @@
+import * as L from '@leda';
+import { Live } from '@/components/live';
+import { log } from '@/utils';
+
+export const Required = () => (
+  <div>
+    <Live scope={{ L, log }}>
+      {
+          `
+() => {
+  return (
+    <>
+      <L.Calendar
+        form="calendar-form"
+        name="calendar"
+        isRequired
+        requiredMessage="Please set the date"
+        onChange={({ component }) => console.log(component.value)}
+        _mb-6
+      />
+
+      <L.Button
+        form="calendar-form"
+        onClick={({ form }) => {
+          const formData = form['calendar-form']
+
+          log(formData)
+        }}
+      >
+        Submit
+      </L.Button>
+    </>
+  )
+}
+  `
+        }
+    </Live>
+  </div>
+);

package/docs/src/app/form-components/calendar/_demo/Reset.tsx

@@ -0,0 +1,34 @@
+import * as L from '@leda';
+import { Live } from '@/components/live';
+import { log } from '@/utils';
+
+export const Reset = () => (
+  <div>
+    <Live scope={{ L, log }}>
+      {
+          `
+() => {
+  return (
+    <>
+      <L.Calendar
+        form="calendar-form-reset"
+        name="calendar"
+        onChange={({ component }) => log(component.value)}
+        _mb-6
+      />
+
+      <L.Button
+        onClick={() => {
+          L.form('calendar-form-reset', 'calendar').reset()
+        }}
+      >
+        Reset
+      </L.Button>
+    </>
+  )
+}
+  `
+        }
+    </Live>
+  </div>
+);

package/docs/src/app/form-components/calendar/_demo/Uncontrolled.tsx

@@ -0,0 +1,20 @@
+import { Calendar } from '@leda/index';
+import { Live } from '@/components/live';
+
+export const Uncontrolled = () => (
+  <div>
+    <Live scope={{ Calendar }}>
+      {
+          `
+() => {
+  return (
+    <Calendar
+      onChange={({ component }) => console.log(component.value)}
+    />
+  )
+}
+  `
+        }
+    </Live>
+  </div>
+);