@validationcloud/fractal-ui 1.4.0 → 1.5.1

package/README.md

@@ -1,2 +1,63 @@
-# fractal-ui
-Validation Cloud's component library
+![Fractal UI](./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/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;