Merge branch 'main' into add/github-pr-template

.storybook/main.ts

@@ -2,6 +2,16 @@ import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	typescript: {
+		reactDocgen: 'react-docgen-typescript',
+		reactDocgenTypescriptOptions: {
+			compilerOptions: {
+				allowSyntheticDefaultImports: false,
+				esModuleInterop: false,
+			},
+			propFilter: () => true,
+		},
+	},
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',

src/Button/Button.stories.tsx

@@ -1,14 +1,17 @@
+// import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Button } from '.'
+import { ButtonBase } from './ButtonBase'
 
-const meta: Meta<typeof Button> = {
-	component: Button,
+const meta = {
+	title: 'Components/Button',
+	component: ButtonBase,
 	tags: ['autodocs'],
-}
+} satisfies Meta<typeof ButtonBase>
 
 export default meta
-type Story = StoryObj<typeof Button>
+
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
@@ -19,6 +22,6 @@ export const Default: Story = {
 export const Destructive: Story = {
 	args: {
 		destructive: true,
-		children: 'Danger!',
+		children: 'Cancel',
 	},
 }

src/Button/ButtonBase.tsx

@@ -0,0 +1,84 @@
+import { ReactElement } from 'react'
+
+import * as Styles from './styled'
+
+interface Props {
+	/**what will be rendered inside the button. It represents the content or label of the button */
+	children?: any
+	/** Click callback, with event object passed as argument */
+	onClick?: () => void
+	/** When set to `true`, this prop makes the button smaller in size. */
+	small?: boolean
+	/** gives the button a solid background when set to `true` */
+	solid?: boolean
+	/** gitves the submit attribute to the button element */
+	submit?: boolean
+	/**to display the button inline with other elements */
+	inline?: boolean
+	/** center alignment of the button */
+	center?: boolean
+	/** set the button as the default action */
+	default?: boolean
+	/** disables the button when set to `true` */
+	disabled?: boolean
+	/** control whether the button is in read-only mode */
+	readOnly?: boolean
+	/** indicates that the button is required for a certain action */
+	required?: boolean
+	/** when set to `true` styles of the button change to red to indicate a irreversible action */
+	destructive?: boolean
+	/** when set to `true` the button background disspaears */
+	$transparent?: boolean
+	as?: string | ReactElement
+	name?: string
+	/** */
+	title?: string
+}
+
+export { baseButtonStyles } from './styled'
+
+/**Cretia actions buttons
+ *
+ * Renders a default `button` that can be styled with the `destructive`,
+ *
+ * `solid` and `$transparent` props.
+ */
+
+function ButtonBase(props: Props) {
+	const {
+		name = 'react',
+		title,
+		submit = false,
+		inline = false,
+		center = false,
+		readOnly = false,
+		required = false,
+		children,
+		disabled = false,
+		destructive = false,
+		solid = submit,
+		small = inline,
+		$transparent = inline,
+	} = props
+	const useButton = !submit && typeof children !== 'string'
+
+	return (
+		<Styles.Container
+			name={name}
+			small={small}
+			solid={solid}
+			$center={center}
+			disabled={disabled}
+			readOnly={readOnly}
+			required={required}
+			$destructive={destructive}
+			$transparent={$transparent}
+			type={submit ? 'submit' : 'button'}
+			{...(useButton
+				? { as: 'button' as any, children: children || title }
+				: { value: children || title })}
+		/>
+	)
+}
+
+export { ButtonBase }

src/Checkbox/Checkbox.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { CheckboxBase } from '.'
+
+const meta = {
+	title: 'Components/Checkbox',
+	component: CheckboxBase,
+	tags: ['autodocs'],
+} satisfies Meta<typeof CheckboxBase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		name: '',
+		checked: true,
+	},
+}

src/Checkbox/index.tsx

@@ -4,21 +4,34 @@ import { styled } from 'styled-components'
 import { Label } from './styled'
 
 type Props = {
+	/** overrides `CSSProperties` */
 	style?: CSSProperties
+	/** `name` attribute of `input` */
 	name: string
+	/** Sets the checkbox checked value */
 	checked?: boolean
+	/** indicates that is required for a certain action */
 	required?: boolean
+	/** Change callback invoked when the value of the `input` changes */
 	onChange?: (event: ChangeEvent<HTMLInputElement>) => any
+	/** Content of `label` element */
 	label?: ReactNode
+	/** `id` attribute of `input` */
 	id?: string
+	/** Sets the `value` attribute of the `input` */
 	value?: string
+	/** disables the checkbox when set to `true` */
 	disabled?: boolean
+	/** control whether the checkbox is in read-only mode */
 	readOnly?: boolean
 }
 
 const styles = { input: { marginRight: 4, flexShrink: 0 } }
 
-function CheckboxBase(props: Props): ReactElement {
+/**
+ * Cretia styled checkbox with built-in label.
+ */
+export function CheckboxBase(props: Props): ReactElement {
 	const {
 		style = {},
 		label,
@@ -31,7 +44,6 @@ function CheckboxBase(props: Props): ReactElement {
 		disabled,
 		readOnly,
 	} = props
-
 	return (
 		<Label key={String(checked)} style={style} htmlFor={id}>
 			<input

src/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ColorPickerBase } from '.'
+
+const meta = {
+	title: 'Components/ColorPicker',
+	component: ColorPickerBase,
+	tags: ['autodocs'],
+} satisfies Meta<typeof ColorPickerBase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: { name: 'helloworld', value: '#fff' },
+}

src/ColorPicker/index.tsx

@@ -8,13 +8,23 @@ import * as Styled from './styled'
 
 interface Props {
 	value: string
+	/** `name` attribute of `input` */
 	name: string
+	/** control whether the color picker is in read-only mode */
 	readOnly?: boolean
+	/** displayed if theres an error message as `string` */
 	error?: string | false
+	/** Change callback invoked when the value of the `input` changes */
 	onChange?: (value: any) => void
 }
 
-function ColorPickerBase({
+/**
+ * Select a color from the range displayed to replace the component value with
+ *
+ * it's correspondant HEX
+ */
+
+export function ColorPickerBase({
 	value = '#ffffff',
 	onChange = () => undefined,
 	name,

src/File/File.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { FileBase } from '.'
+
+const meta = {
+	title: 'Components/File',
+	component: FileBase,
+	tags: ['autodocs'],
+} satisfies Meta<typeof FileBase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: { name: 'helloworld.pdf', value: 'helloworld.pdf', label: '' },
+}

src/File/index.tsx

@@ -4,19 +4,28 @@ import { styled } from 'styled-components'
 import * as Styled from './styled'
 
 interface Props {
+	/** Content of `label` element */
 	label: string
+	/** Sets the `value` attribute of the `input` */
 	value: any
+	/** `name` attribute of `input` */
 	name: string
+	/** `id` attribute of the file */
 	id?: string
+	/** disables the access to file when set to `true` */
 	disabled?: boolean
+	/** sets dark styles when set to `true`*/
 	dark?: boolean
 	accept?: string
+	/** acceps a url for the file preview */
 	previewUrl?: string
+	/** Change callback invoked when the value of the `input` changes */
 	onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined
+	/** removes the `padding` when set to `true` */
 	paddingless?: boolean
 }
 
-function FileBase(props: Props): ReactElement {
+export function FileBase(props: Props): ReactElement {
 	const {
 		label,
 		value,

src/Pill/Pill.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { PillBase } from '.'
+
+const meta = {
+	title: 'Components/Pill',
+	component: PillBase,
+	tags: ['autodocs'],
+} satisfies Meta<typeof PillBase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: { message: 'This is a message' },
+}

src/Pill/index.tsx

@@ -8,12 +8,24 @@ import { styled } from 'styled-components'
 import * as Styles from './styles'
 
 interface Props {
+	/** content that will be displayed on the pill */
 	message?: string | ReactElement | ReactNode
+	/** content that will be displayed on the pill */
 	children?: string | ReactElement | ReactNode
+	/** overrides `CSSProperties` */
 	style?: CSSProperties
+	/** */
 	icon?: ReactNode
 }
 
+/** Display an important message with Cretia styled Pill
+ *
+ * add a related icon trough the `icon` prop or pass a `button`
+ *
+ * to the children `prop` to emphazise it
+ *
+ */
+
 export function PillBase(
 	props: Props & React.ComponentProps<typeof Styles.Container>,
 ): ReactElement {

src/Popup/Popup.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { PopupBase } from '.'
+
+const meta = {
+	title: 'Components/Popup',
+	component: PopupBase,
+	tags: ['autodocs'],
+} satisfies Meta<typeof PopupBase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: { children: 'ReactNode', relative: false, visible: true },
+}

src/Popup/index.tsx

@@ -3,16 +3,17 @@ import { styled } from 'styled-components'
 
 import * as Styled from './styled'
 
-type Props = {
+interface Props {
 	children: ReactNode
 	onDismiss: () => void
 	relative: boolean
 	visible: boolean
 }
 
-const PopupBase = forwardRef(function TooltipComponent(props: Props, ref: any) {
-	const { children, onDismiss, visible, ...moreProps } = props
-
+export const PopupBase = forwardRef(function TooltipComponent(
+	{ children, onDismiss, visible = true, ...moreProps }: Props,
+	ref: any,
+) {
 	const tooltipRef = useRef<HTMLDivElement>(null)
 
 	useEffect(() => {

src/Radio/Radio.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { RadioBase } from '.'
+
+const meta = {
+	title: 'Components/Radio',
+	component: RadioBase,
+	tags: ['autodocs'],
+} satisfies Meta<typeof RadioBase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: { value: 'any', checked: false, name: 'string', label: 'string' },
+}