@validationcloud/fractal-ui 1.3.0 → 1.5.0

package/README.md

@@ -1,2 +1,63 @@
-# fractal-ui
-Validation Cloud's component library
+![test](./src/assets/fractal-ui.svg)
+
+# @validationcloud/fractal-ui
+
+This is Validation Cloud's component library, providing our web applications with custom React components, design tokens, and Tailwind classes.
+
+## Usage
+
+The `@validationcloud/fractal-ui` package requires `react`, `react-dom`, and `tailwindcss` to also be installed as they are peer dependencies.
+
+```sh
+npm install @validationcloud/fractal-ui react react-dom tailwindcss
+```
+
+### Components
+
+All components located in `src/components/` are available for use and can be imported as such:
+
+```sh
+import { Button } from '@validationcloud/fractal-ui'
+```
+
+### Stylesheet
+
+This library provides a stylesheet that can be used in projects using the Tailwind CSS styling framework. Currently the consuming project needs to be using Tailwind 4.
+
+In the consuming application's global stylesheet, import the `tailwind.css` file after the `tailwindcss` import:
+
+```sh
+@import 'tailwindcss';
+@import '@validationcloud/fractal-ui/tailwind.css';
+```
+
+## Local development
+
+Install packages:
+
+```sh
+npm install
+```
+
+Start Storybook development server:
+
+```sh
+npm run storybook
+```
+
+Storybook can be accessed at [http://localhost:6006](http://localhost:6006)
+
+## Project structure
+
+```
+├── src            -> svgs files (e.g: project logo, icons)
+│ ├── assets       -> serverless functions deployed as API on Vercel
+│ ├── components   -> publicy exported components
+│ ├── internal     -> components used internally, not exported
+│ ├── lib          -> utility function and shared logic
+│ └── styles       -> stylesheets with design tokens and custom Tailwind classes
+```
+
+## Storybook
+
+A deployed version of the @validationcloud/fractal-ui Storybook docs can be found at [https://fractal-ui.vercel.app/](https://fractal-ui.vercel.app/)

package/dist/components/box/box.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export declare const Box: React.ForwardRefExoticComponent<{
+    header?: React.ReactNode;
+    borderRadius?: "rounded-xl" | "rounded-lg";
+    padding?: "p-r6" | "p-r4" | "p-0";
+    background?: "bg-neutral-60" | "bg-neutral-70" | "bg-neutral-80" | "bg-gradient-box" | "transparent";
+    borderColor?: "border-secondary-40";
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/box/box.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    component: import('react').ForwardRefExoticComponent<{
+        header?: React.ReactNode;
+        borderRadius?: "rounded-xl" | "rounded-lg";
+        padding?: "p-r6" | "p-r4" | "p-0";
+        background?: "bg-neutral-60" | "bg-neutral-70" | "bg-neutral-80" | "bg-gradient-box" | "transparent";
+        borderColor?: "border-secondary-40";
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        asChild?: boolean;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const EmptyBox: Story;
+export declare const BoxWithHeader: Story;
+export declare const BoxWithoutHeader: Story;
+export declare const GradientBox: Story;
+export declare const RenderedAsDifferentElement: Story;

package/dist/components/text-input/text-input.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+type TextInputProps = {
+    variant?: 'outlined' | 'filled';
+    disablePasswordManagers?: boolean;
+    rightAccessory?: React.ReactNode;
+    errorState?: boolean;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const TextInput: ({ variant, disablePasswordManagers, rightAccessory, errorState, className, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/text-input/text-input.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    component: ({ variant, disablePasswordManagers, rightAccessory, errorState, className, ...props }: {
+        variant?: "outlined" | "filled";
+        disablePasswordManagers?: boolean;
+        rightAccessory?: React.ReactNode;
+        errorState?: boolean;
+    } & import('react').InputHTMLAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        disabled: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const EmptyWithPlaceholder: Story;
+export declare const EmpyWithPlaceholderFilled: Story;
+export declare const WithContent: Story;
+export declare const WithContentFilled: Story;
+export declare const WithAccessory: Story;
+export declare const WithAccessoryFilled: Story;
+export declare const ErrorState: Story;
+export declare const ErrorStateFilled: Story;
+export declare const Disabled: Story;
+export declare const DisabledFilled: Story;