suus-component-library 0.1.5 → 0.1.7

package/README.md

@@ -2,74 +2,12 @@
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
-
 ## React Compiler
 
 The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+## Github Pages for Component Library Storybook
 
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+https://hettlingen.github.io/suus-component-library/
 
 ##

package/dist/components/form/button/Button.d.ts

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type ColorToken = "--colors-juice-sugarcane" | "--colors-juice-tamarind" | "--colors-juice-guava" | "--colors-juice-icetea";
+export type ButtonProps = {
+    label: string;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    loading?: boolean;
+    variant?: "primary" | "secondary";
+    colorToken?: ColorToken;
+    icon?: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "disabled">;
+/**
+ * A customizable button component that supports different variants, loading states, and color tokens.
+ */
+export default function Button({ label, onClick, type, disabled, loading, variant, colorToken, icon, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/form/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/form/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAiB,UAAU,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGtF,MAAM,MAAM,UAAU,GAChB,0BAA0B,GAC1B,yBAAyB,GACzB,sBAAsB,GACtB,uBAAuB,CAAC;AAE9B,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EACS,KAAK,EACL,OAAO,EACP,IAAe,EACf,QAAgB,EAChB,OAAe,EACf,OAAmB,EACnB,UAAuC,EACvC,IAAI,EACJ,GAAG,IAAI,EACV,EAAE,WAAW,2CAoCjD"}

package/dist/components/form/{buttons/input-button/InputButton.stories.d.ts → button/Button.stories.d.ts}

@@ -1,8 +1,8 @@
 import { StoryObj } from '@storybook/react-vite';
-import { default as InputButton } from './InputButton';
+import { default as Button } from './Button';
 declare const meta: {
     title: string;
-    component: typeof InputButton;
+    component: typeof Button;
     parameters: {
         layout: string;
     };
@@ -30,4 +30,4 @@ export declare const Primary: Story;
 export declare const Secondary: Story;
 export declare const Disabled: Story;
 export declare const Icon: Story;
-//# sourceMappingURL=InputButton.stories.d.ts.map
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/components/form/button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/form/button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CA4BqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KA+BlB,CAAC"}

package/dist/components/form/button/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Button';
+export type { ButtonProps, ColorToken } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/form/checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type CheckboxProps = {
+    label: ReactNode;
+    name: string;
+    error?: string;
+    variant?: "default" | "glassy";
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
+export default function Checkbox({ label, name, id, error, variant, className, disabled, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/form/checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5D,MAAM,MAAM,aAAa,GAAG;IACxB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAClC,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EACI,KAAK,EACL,IAAI,EACJ,EAAE,EACF,KAAK,EACL,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,aAAa,2CAgDhD"}

package/dist/components/form/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,25 @@
+import { StoryObj } from '@storybook/react';
+import { default as Checkbox } from './Checkbox';
+declare const meta: {
+    title: string;
+    component: typeof Checkbox;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Error: Story;
+export declare const ErrorChecked: Story;
+export declare const Glassy: Story;
+//# sourceMappingURL=Checkbox.stories.d.ts.map

package/dist/components/form/checkbox/Checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/form/checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;CAYuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAuBpB,CAAC"}

package/dist/components/form/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/form/chip/Chip.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type ChipProps = {
+    children: ReactNode;
+    variant?: "glassy" | "default";
+} & HTMLAttributes<HTMLSpanElement>;
+/**
+ * A reusable Chip component that can be used across the application.
+ *
+ * How to use it in your application:
+ *
+ * <Chip>Bio</Chip>
+ * <Chip variant="glassy">Sugarcane</Chip>
+ * <Chip className={styles.myCustomChip}>Limited Edition</Chip>
+ *
+ * ODER:
+ *
+ * <div className="chips">
+ *    {(profile.interests ?? []).map((interest) => (
+ *       <Chip key={interest.label}>{interest.label.toUpperCase()}</Chip>
+ *    ))}
+ * </div>
+ */
+export default function Chip({ children, variant, className, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/form/chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/form/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,SAAS,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAGpC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EACI,QAAQ,EACR,OAAmB,EACnB,SAAS,EACT,GAAG,IAAI,EACV,EAAE,SAAS,2CAexC"}

package/dist/components/form/chip/Chip.stories.d.ts

@@ -0,0 +1,37 @@
+import { StoryObj } from '@storybook/react-vite';
+import { default as Chip } from './Chip';
+declare const meta: {
+    title: string;
+    component: typeof Chip;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: "text";
+        };
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        title: {
+            control: "text";
+        };
+    };
+    args: {
+        children: string;
+        variant: "default";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DefaultLongText: Story;
+export declare const Glassy: Story;
+export declare const GlassyLongText: Story;
+export declare const WithTitleAttribute: Story;
+export declare const CustomColors: Story;
+export declare const MultipleChips: Story;
+export declare const MultipleGlassyChips: Story;
+//# sourceMappingURL=Chip.stories.d.ts.map

package/dist/components/form/chip/Chip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/form/chip/Chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,IAAI,MAAM,QAAQ,CAAC;AAE1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CAuBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAsBjC,CAAC"}

package/dist/components/form/chip/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Chip';
+export type { ChipProps } from './Chip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/form/date-picker/DatePicker.d.ts

@@ -0,0 +1,46 @@
+import { InputHTMLAttributes, Ref } from 'react';
+export type DatePickerProps = {
+    label: string;
+    name: string;
+    value?: Date | null;
+    maxDate?: Date;
+    minDate?: Date;
+    error?: string;
+    variant?: "glassy" | "default";
+    ref?: Ref<HTMLInputElement>;
+    onDateChange?: (date: Date | null) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "max" | "min">;
+/**
+ * A reusable DatePicker component that can be used across the application.
+ *
+ * How to use it in your application:
+ * Use with state:
+ *
+ * const [birthday, setBirthday] = useState<Date | null>(null);
+ *
+ *  <DatePicker
+ *    name="birthday"
+ *    label="Geburtsdatum"
+ *    value={birthday}
+ *    onDateChange={setBirthday}
+ *    error={errors.birthday?.message}
+ *  />
+ *
+ * Use with react-hook-form:
+ *  <Controller
+ *    name="birthday"
+ *    control={control}
+ *    render={({ field, fieldState }) => (
+ *      <DatePicker
+ *        name={field.name}
+ *        label="Geburtsdatum"
+ *        value={field.value}
+ *        onDateChange={field.onChange}
+ *        onBlur={field.onBlur}
+ *        error={fieldState.error?.message}
+ *      />
+ *    )}
+ *  />
+ */
+export default function DatePicker({ label, name, id, value, maxDate, minDate, error, variant, className, ref, onDateChange, onBlur, disabled, ...rest }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/form/date-picker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGH,KAAK,mBAAmB,EACxB,KAAK,GAAG,EACX,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C,GAAG,IAAI,CACJ,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,CAChD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACI,KAAK,EACL,IAAI,EACJ,EAAE,EACF,KAAY,EACZ,OAAO,EACP,OAAO,EACP,KAAK,EACL,OAAmB,EACnB,SAAS,EACT,GAAG,EACH,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,eAAe,2CA4FpD"}