@samuelgomez/astro 0.1.0

package/src/components/Title/h6.astro

@@ -0,0 +1,12 @@
+---
+import Title from './index.astro';
+
+type Props = {
+  label: string;
+  noLink?: boolean;
+};
+
+const props = Astro.props;
+---
+
+<Title level={6} {...props}><slot /></Title>

package/src/components/Title/heading.astro

@@ -0,0 +1,8 @@
+---
+export { default as h1 } from './h1.astro';
+export { default as h2 } from './h2.astro';
+export { default as h3 } from './h3.astro';
+export { default as h4 } from './h4.astro';
+export { default as h5 } from './h5.astro';
+export { default as h6 } from './h6.astro';
+---

package/src/components/Title/index.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLTag } from 'astro/types';
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+import Anchor from '@samuelgomez/astro/icons/Anchor.astro';
+import { setSlug } from '@samuelgomez/astro/helpers/setSlug';
+
+export type titleLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+type Props = {
+  label?: string;
+  level?: titleLevel;
+  noLink?: boolean;
+  id?: string;
+};
+
+const { label, level = 1, noLink, id, ...props } = Astro.props;
+
+const htmlLabel = await Astro.slots.render('default');
+
+const idHeading = label ? setSlug(label) : id?.replace('--', '-');
+
+const title = label || htmlLabel.toString();
+
+const Heading = `h${level}` as HTMLTag;
+---
+
+<Heading {...props} id={idHeading}>
+  {
+    !noLink && idHeading && (
+      <Link href={`#${idHeading}`}>
+        <Anchor slot="after-link" title={title} />
+      </Link>
+    )
+  }
+  <slot name="before-title" />
+  {label}
+  <slot />
+  <slot name="after-title" />
+</Heading>

package/src/components/WrapperToHtml/index.astro

@@ -0,0 +1,8 @@
+---
+const html = await Astro.slots.render('default');
+import { Code } from 'astro/components';
+---
+
+<Fragment set:html={html} />
+
+<Code code={html} lang="html" />

package/src/components/form/Field/index.astro

@@ -0,0 +1,43 @@
+---
+import MoreInfo from '@samuelgomez/astro/components/form/MoreInfo/index.astro';
+import Status from '@samuelgomez/astro/components/form/Status/index.astro';
+
+type Props = {
+  id?: string;
+  name: string;
+  label: string;
+  moreInfo: string;
+  help: string;
+  errorMessage?: string;
+  title?: string;
+  required?: boolean;
+};
+
+const {
+  name,
+  id = name,
+  label,
+  moreInfo,
+  help,
+  errorMessage,
+  title,
+  required = true,
+} = Astro.props;
+
+const html = await Astro.slots.render('default', [name]);
+---
+
+<div class="field">
+  <label id={`label-${name}`} for={id}>{label}</label>
+  {moreInfo && <MoreInfo moreInfo={moreInfo} />}
+  <div class="input-container">
+    <Fragment set:html={html} />
+  </div>
+  <Status
+    required={required}
+    id={id || name}
+    help={help}
+    errorMessage={errorMessage}
+    title={title}
+  />
+</div>

package/src/components/form/Fieldset/index.astro

@@ -0,0 +1,14 @@
+---
+type Props = {
+  legend: string;
+};
+
+const { legend } = Astro.props;
+---
+
+<div class="fieldset-grid box">
+  <fieldset>
+    <legend>{legend}</legend>
+    <slot />
+  </fieldset>
+</div>

package/src/components/form/Form/FieldDate.astro

@@ -0,0 +1,32 @@
+---
+import Field from '@samuelgomez/astro/components/form/Field/index.astro';
+import Input from '@samuelgomez/astro/components/form/Input/index.astro';
+
+const {
+  name = 'date',
+  label = 'Votre date',
+  moreInfo = "Plus d'infos",
+  help = 'Aide',
+  autocomplete = null,
+  required = true,
+  errorMessage = undefined,
+  ...rest
+} = Astro.props;
+---
+
+<Field
+  name={name}
+  label={label}
+  moreInfo={moreInfo}
+  help={help}
+  required={required}
+  errorMessage={errorMessage}
+>
+  <Input
+    name={name}
+    autocomplete={autocomplete}
+    type="date"
+    required={required}
+    {...rest}
+  />
+</Field>

package/src/components/form/Form/FieldEmail.astro

@@ -0,0 +1,32 @@
+---
+import Field from '@samuelgomez/astro/components/form/Field/index.astro';
+import Input from '@samuelgomez/astro/components/form/Input/index.astro';
+
+const {
+  name = 'email',
+  label = 'Votre email',
+  moreInfo = "Plus d'infos",
+  help = 'Aide',
+  autocomplete = 'email',
+  required = true,
+  errorMessage = undefined,
+  ...rest
+} = Astro.props;
+---
+
+<Field
+  name={name}
+  label={label}
+  moreInfo={moreInfo}
+  help={help}
+  required={required}
+  errorMessage={errorMessage}
+>
+  <Input
+    name={name}
+    autocomplete={autocomplete}
+    type="email"
+    required={required}
+    {...rest}
+  />
+</Field>

package/src/components/form/Form/FieldNumber.astro

@@ -0,0 +1,35 @@
+---
+import Field from '@samuelgomez/astro/components/form/Field/index.astro';
+import Input from '@samuelgomez/astro/components/form/Input/index.astro';
+
+const {
+  name = 'text',
+  label = 'Votre text',
+  moreInfo = "Plus d'infos",
+  help = 'Aide',
+  autocomplete = null,
+  errorMessage = undefined,
+  required = true,
+  title = undefined,
+  ...rest
+} = Astro.props;
+---
+
+<Field
+  name={name}
+  label={label}
+  moreInfo={moreInfo}
+  help={help}
+  errorMessage={errorMessage}
+  required={required}
+  title={title}
+>
+  <Input
+    name={name}
+    autocomplete={autocomplete}
+    type="number"
+    required={required}
+    title={title}
+    {...rest}
+  />
+</Field>

package/src/components/form/Form/FieldPassword.astro

@@ -0,0 +1,32 @@
+---
+import Field from '@samuelgomez/astro/components/form/Field/index.astro';
+import Input from '@samuelgomez/astro/components/form/Input/index.astro';
+
+const {
+  name = 'password',
+  label = 'Votre mot de passe',
+  moreInfo = "Plus d'infos",
+  help = 'Aide',
+  autocomplete = 'off',
+  required = true,
+  errorMessage = undefined,
+  ...rest
+} = Astro.props;
+---
+
+<Field
+  name={name}
+  label={label}
+  moreInfo={moreInfo}
+  help={help}
+  required={required}
+  errorMessage={errorMessage}
+>
+  <Input
+    name={name}
+    autocomplete={autocomplete}
+    type="password"
+    required={required}
+    {...rest}
+  />
+</Field>

package/src/components/form/Form/FieldRadio.astro

@@ -0,0 +1,32 @@
+---
+import Field from '@samuelgomez/astro/components/form/Field/index.astro';
+import Radio from '@samuelgomez/astro/components/form/InputRadio/index.astro';
+
+const {
+  name = 'selection',
+  label = 'Votre sélection',
+  moreInfo = "Plus d'infos",
+  help = 'Aide',
+  options = [],
+  errorMessage = undefined,
+  required = true,
+  ...rest
+} = Astro.props;
+---
+
+<Field
+  name={name}
+  label={label}
+  moreInfo={moreInfo}
+  help={help}
+  errorMessage={errorMessage}
+  required={required}
+>
+  <Radio
+    legend={label}
+    name={name}
+    options={options}
+    required={required}
+    {...rest}
+  />
+</Field>

package/src/components/form/Form/FieldSelect.astro

@@ -0,0 +1,26 @@
+---
+import Field from '@samuelgomez/astro/components/form/Field/index.astro';
+import Select from '@samuelgomez/astro/components/form/Select/index.astro';
+
+const {
+  name = 'selection',
+  label = 'Votre sélection',
+  moreInfo = "Plus d'infos",
+  help = 'Aide',
+  options = [],
+  errorMessage = undefined,
+  required = true,
+  ...rest
+} = Astro.props;
+---
+
+<Field
+  name={name}
+  label={label}
+  moreInfo={moreInfo}
+  help={help}
+  required={required}
+  errorMessage={errorMessage}
+>
+  <Select name={name} options={options} required={required} {...rest} />
+</Field>

package/src/components/form/Form/FieldText.astro

@@ -0,0 +1,35 @@
+---
+import Field from '@samuelgomez/astro/components/form/Field/index.astro';
+import Input from '@samuelgomez/astro/components/form/Input/index.astro';
+
+const {
+  name = 'text',
+  label = 'Votre text',
+  moreInfo = "Plus d'infos",
+  help = 'Aide',
+  autocomplete = null,
+  errorMessage = undefined,
+  required = true,
+  title = undefined,
+  ...rest
+} = Astro.props;
+---
+
+<Field
+  name={name}
+  label={label}
+  moreInfo={moreInfo}
+  help={help}
+  errorMessage={errorMessage}
+  required={required}
+  title={title}
+>
+  <Input
+    name={name}
+    autocomplete={autocomplete}
+    type="text"
+    required={required}
+    title={title}
+    {...rest}
+  />
+</Field>

package/src/components/form/Form/FieldTextarea.astro

@@ -0,0 +1,25 @@
+---
+import Field from '@samuelgomez/astro/components/form/Field/index.astro';
+import Textarea from '@samuelgomez/astro/components/form/Textarea/index.astro';
+
+const {
+  name = 'text',
+  label = 'Votre text',
+  moreInfo = "Plus d'infos",
+  help = 'Aide',
+  errorMessage = undefined,
+  required = true,
+  ...rest
+} = Astro.props;
+---
+
+<Field
+  name={name}
+  label={label}
+  moreInfo={moreInfo}
+  help={help}
+  required={required}
+  errorMessage={errorMessage}
+>
+  <Textarea name={name} required={required} {...rest} />
+</Field>

package/src/components/form/Form/index.astro

@@ -0,0 +1,5 @@
+---
+const props = Astro.props;
+---
+
+<form {...props}><slot /></form>

package/src/components/form/Input/index.astro

@@ -0,0 +1,27 @@
+---
+type Props = astroHTML.JSX.InputHTMLAttributes & {
+  ariaDescribedby?: string;
+};
+
+const {
+  name,
+  autocomplete,
+  type = 'text',
+  required = true,
+  id = name,
+  value,
+  ariaDescribedby = `help-${id}`,
+  ...inputProps
+} = Astro.props;
+---
+
+<input
+  type={type}
+  name={name}
+  required={required}
+  id={id}
+  value={value}
+  autocomplete={autocomplete}
+  aria-describedby={ariaDescribedby}
+  {...inputProps}
+/>

package/src/components/form/InputRadio/index.astro

@@ -0,0 +1,30 @@
+---
+type Props = Partial<HTMLInputElement> & {
+  ariaDescribedby?: string;
+  options: {
+    label: string;
+    value: string;
+  }[];
+  legend: string;
+};
+
+const { name, required = true, options, legend } = Astro.props;
+---
+
+<fieldset>
+  <legend class="sr-only">{legend}</legend>
+  {
+    options?.map((option, index) => (
+      <>
+        <input
+          type="radio"
+          name={name}
+          required={required}
+          id={`${name}-${index}`}
+          value={option.value}
+        />
+        <label for={`${name}-${index}`}>{option.label}</label>
+      </>
+    ))
+  }
+</fieldset>

package/src/components/form/MoreInfo/index.astro

@@ -0,0 +1,14 @@
+---
+import Button from '@samuelgomez/astro/components/Button/index.astro';
+import Info from '@samuelgomez/astro/icons/Info.astro';
+
+type Props = {
+  moreInfo: string;
+};
+
+const { moreInfo } = Astro.props;
+---
+
+<Button class="tooltip" variant="small" aria-label={moreInfo}>
+  <Info />
+</Button>

package/src/components/form/Select/index.astro

@@ -0,0 +1,25 @@
+---
+type Props = Partial<Omit<HTMLSelectElement, 'options'>> & {
+  ariaDescribedby?: string;
+  options: {
+    label: string;
+    value: string;
+  }[];
+  placeholder?: string;
+  placeholderValue?: string;
+};
+
+const {
+  name,
+  required = true,
+  id = name,
+  options,
+  placeholder = 'Sélectionner',
+  placeholderValue = '',
+} = Astro.props;
+---
+
+<select name={name} required={required} id={id}>
+  <option value={placeholderValue}>{placeholder}</option>
+  {options?.map(option => <option value={option.value}>{option.label}</option>)}
+</select>

package/src/components/form/Status/index.astro

@@ -0,0 +1,34 @@
+---
+import Cross from '@samuelgomez/astro/icons/Cross.astro';
+import Check from '@samuelgomez/astro/icons/Check.astro';
+type Props = {
+  id?: string;
+  help: string;
+  errorMessage?: string;
+  title?: string;
+  required?: boolean;
+};
+
+const {
+  help,
+  id,
+  errorMessage = 'Le champ est en erreur',
+  required = true,
+  title = undefined,
+} = Astro.props;
+---
+
+<span class="error-icon" aria-hidden="true"
+  ><Cross fill="var(--bc-error)" /></span
+>
+<span class="valid-icon" aria-hidden="true"
+  ><Check fill="var(--bc-success)" /></span
+>
+<span class="help-message" id={`help-${id}`}>
+  {help}
+  {required ? ' (champ obligatoire)' : ' (champ optionnel)'}
+</span>
+<span role="alert" class="error-message">
+  {errorMessage}
+  {Boolean(title) && ` : ${title}`}
+</span>

package/src/components/form/Textarea/index.astro

@@ -0,0 +1,26 @@
+---
+type Props = Partial<HTMLTextAreaElement> & {
+  ariaDescribedby?: string;
+};
+
+const {
+  name,
+  required = true,
+  id = name,
+  value,
+  rows = '5',
+  cols = '5',
+  ariaDescribedby = `help-${id}`,
+} = Astro.props;
+---
+
+<textarea
+  value={value}
+  name={name}
+  required={required}
+  id={id}
+  rows={rows}
+  cols={cols}
+  aria-describedby={ariaDescribedby}
+  spellcheck="true"
+  lang="fr"></textarea>

package/src/components/helpers/WrapperOrNot/index.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLTag } from 'astro/types';
+
+type Props = {
+  condition?: boolean;
+  wrapper?: HTMLTag;
+  class?: string;
+};
+
+const { condition, wrapper: Wrapper = 'div', ...rest } = Astro.props;
+---
+
+{
+  condition ? (
+    <Wrapper {...rest}>
+      <slot />
+    </Wrapper>
+  ) : (
+    <>
+      <slot />
+    </>
+  )
+}

package/src/components/layout/Footer.astro

@@ -0,0 +1,3 @@
+<footer>
+  <p>&copy; Samuel Gomez 2024</p>
+</footer>