Input Component

.storybook/manager.js

@@ -0,0 +1,8 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+    theme: theme
+});

.storybook/preview.ts

@@ -2,6 +2,13 @@ import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      default: 'code0',
+      values: [
+        {name: 'code0', value: '#030014'}
+      ],
+    },
+    layout: 'centered',
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {

.storybook/theme.js

@@ -0,0 +1,43 @@
+// .storybook/YourTheme.js
+
+import { create } from '@storybook/theming/create';
+
+export default create({
+    base: 'dark',
+    // Typography
+    fontBase: '"Ubuntu", sans-serif',
+    fontCode: 'monospace',
+
+    brandTitle: 'Code0 Base UI',
+    brandUrl: 'https://code0.tech',
+    brandImage: 'https://cdn.discordapp.com/attachments/1173726744130375791/1176472242469740604/Logo.png',
+    brandTarget: '_self',
+
+    // UI
+    colorPrimary: '#70ffb2',
+    colorSecondary: '#70ffb2',
+    appBg: '#030014',
+    booleanBg: "rgba(255,255,255, .1)",
+    appContentBg: '#030014',
+    appBorderColor: '#91949A',
+    borderBottomColor: '91949A',
+    borderLeftColor: '91949A',
+    borderRightColor: '91949A',
+    borderTopColor: '91949A',
+    appBorderRadius: 0,
+
+    // Text colors
+    textColor: '#ffffff',
+    textInverseColor: '#ffffff',
+
+    // Toolbar default and active colors
+    barTextColor: 'rgba(255,255,255, .5)',
+    barSelectedColor: 'rgba(255,255,255, .75)',
+    barBg: '#030014',
+
+    // Form colors
+    inputBg: 'rgba(255,255,255, .1)',
+    inputBorder: '#91949A',
+    inputTextColor: 'rgba(255,255,255, .5)',
+    inputBorderRadius: 2,
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/base-ui",
-  "version": "0.0.0",
+  "version": "0.1.0-pre-alpha",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "dev": "npm run storybook:dev",
@@ -27,9 +27,12 @@
     "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/blocks": "^7.5.3",
     "@storybook/cli": "^7.5.3",
+    "@storybook/manager-api": "^7.5.3",
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.3",
+    "@tabler/icons-react": "^2.42.0",
     "@types/react": "^18.0.15",
     "babel-loader": "^8.2.3",
     "concurrently": "^8.2.2",

src/components/input/Input.stories.tsx

@@ -0,0 +1,39 @@
+import React, {useEffect, useRef} from "react";
+import Input from "./Input";
+import {IconMail} from "@tabler/icons-react";
+
+export default {
+    title: "Input",
+    component: Input
+};
+
+export const Mail = () => <Input>
+    <Input.Label>e-mail</Input.Label>
+    <Input.Control placeholder={"name@mail.com"}/>
+    <Input.Desc>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</Input.Desc>
+</Input>
+
+
+export const Disabled = () => <Input disabled>
+    <Input.Control placeholder={"Your Mail"}>
+        <Input.Control.Icon><IconMail/></Input.Control.Icon>
+    </Input.Control>
+    <Input.Desc>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</Input.Desc>
+</Input>
+
+export const NotValid = () => <Input valid={false}>
+    <Input.Control placeholder={"Your E-Mail"}>
+        <Input.Control.Icon><IconMail/></Input.Control.Icon>
+        <Input.Control.Message>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</Input.Control.Message>
+    </Input.Control>
+    <Input.Desc>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</Input.Desc>
+</Input>
+
+export const Valid = () => <Input valid>
+    <Input.Control placeholder={"Your E-Mail"}>
+        <Input.Control.Message>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</Input.Control.Message>
+    </Input.Control>
+    <Input.Desc>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</Input.Desc>
+</Input>