Skip to content

Commit 6106e41

Browse files
nachoaldamavnachoaldamav
committed
initial commit
0 parents  commit 6106e41

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+22311
-0
lines changed

‎.bitmap‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
2+
3+
/**
4+
* The Bitmap file is an auto generated file used by Bit to track all your Bit components. It maps the component to a folder in your file system.
5+
* This file should be committed to VCS(version control).
6+
* Components are listed using their component ID (https://bit.dev/reference/components/component-id).
7+
* If you want to delete components you can use the "bit remove <component-id>" command.
8+
* See the docs (https://bit.dev/reference/components/removing-components) for more information, or use "bit remove --help".
9+
*/
10+
11+
{
12+
"patterns/form": {
13+
"name": "patterns/form",
14+
"scope": "automations.design",
15+
"version": "0.0.10",
16+
"mainFile": "index.ts",
17+
"rootDir": "bit-components/design/patterns/form"
18+
},
19+
"patterns/header": {
20+
"name": "patterns/header",
21+
"scope": "automations.design",
22+
"version": "0.0.3",
23+
"mainFile": "index.ts",
24+
"rootDir": "bit-components/design/patterns/header"
25+
},
26+
"ui/button": {
27+
"name": "ui/button",
28+
"scope": "automations.design",
29+
"version": "0.0.7",
30+
"mainFile": "index.ts",
31+
"rootDir": "bit-components/design/ui/button"
32+
},
33+
"ui/card": {
34+
"name": "ui/card",
35+
"scope": "automations.design",
36+
"version": "0.0.4",
37+
"mainFile": "index.ts",
38+
"rootDir": "bit-components/design/ui/card"
39+
},
40+
"ui/dropdown": {
41+
"name": "ui/dropdown",
42+
"scope": "automations.design",
43+
"version": "0.0.2",
44+
"mainFile": "index.ts",
45+
"rootDir": "bit-components/design/ui/dropdown"
46+
},
47+
"ui/input": {
48+
"name": "ui/input",
49+
"scope": "automations.design",
50+
"version": "0.0.3",
51+
"mainFile": "index.ts",
52+
"rootDir": "bit-components/design/ui/input"
53+
},
54+
"$schema-version": "17.0.0"
55+
}

‎.github/workflows/merge.yml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: Bit Merge
2+
3+
on:
4+
pull_request:
5+
types: [closed]
6+
branches: [main]
7+
8+
permissions:
9+
contents: write
10+
pull-requests: write
11+
12+
jobs:
13+
main-merge:
14+
if: github.event.pull_request.merged == true
15+
runs-on: ubuntu-latest
16+
env:
17+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
18+
BIT_CONFIG_ACCESS_TOKEN: ${{ secrets.BIT_ACCESS_TOKEN }}
19+
GIT_USER_NAME: ${{ secrets.GIT_USER_NAME }}
20+
GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }}
21+
22+
steps:
23+
- name: Checkout repository
24+
uses: actions/checkout@v4
25+
26+
- name: Initialize Bit
27+
uses: bit-tasks/init@v3
28+
with:
29+
ws-dir: '.'
30+
31+
- name: Bit Tag and Export
32+
uses: bit-tasks/tag-export@v3
33+
with:
34+
build: true

‎.github/workflows/pull-request.yml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
name: Bit PR Check
2+
3+
on:
4+
pull_request:
5+
types: [opened, synchronize]
6+
7+
jobs:
8+
verify:
9+
runs-on: ubuntu-latest
10+
env:
11+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
12+
BIT_CONFIG_ACCESS_TOKEN: ${{ secrets.BIT_ACCESS_TOKEN }}
13+
14+
steps:
15+
- name: Checkout repository
16+
uses: actions/checkout@v4
17+
18+
- name: Initialize Bit
19+
uses: bit-tasks/init@v3
20+
with:
21+
ws-dir: '.'
22+
23+
- name: Bit Pull Request
24+
uses: bit-tasks/pull-request@main
25+
with:
26+
version-labels: true
27+
version-labels-color-major: "f0a09f"
28+
version-labels-color-minor: "f0e8bd"
29+
version-labels-color-patch: "c2e0c6"
30+
clear-labels: true

‎.github/workflows/verify.yml‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
name: Bit verify
2+
3+
on: push
4+
5+
jobs:
6+
verify:
7+
runs-on: ubuntu-latest
8+
env:
9+
BIT_CONFIG_ACCESS_TOKEN: ${{ secrets.BIT_ACCESS_TOKEN }}
10+
11+
steps:
12+
- name: Checkout repository
13+
uses: actions/checkout@v4
14+
15+
- name: Initialize Bit
16+
uses: bit-tasks/init@v3
17+
with:
18+
ws-dir: '.'
19+
20+
- name: Bit Verify
21+
uses: bit-tasks/verify@v2

‎.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Bit
2+
.bit
3+
public
4+
# Bit files - generated during bit ws-config write command
5+
tsconfig.json
6+
.eslintrc.json
7+
.prettierrc.cjs
8+
# allow tsconfig from the env's config dir to be tracked
9+
!**/config/tsconfig.json
10+
node_modules

‎bit-components/design/patterns/form/form.composition.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
import { Form } from './form.js';
3+
4+
export const BasicForm = () => {
5+
const fields = [
6+
{
7+
name: 'name',
8+
label: 'Name',
9+
type: 'text' as const,
10+
placeholder: 'Enter your name',
11+
required: true,
12+
},
13+
{
14+
name: 'email',
15+
label: 'Email',
16+
type: 'email' as const,
17+
placeholder: 'Enter your email',
18+
required: true,
19+
},
20+
];
21+
22+
return (
23+
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
24+
<Form
25+
fields={fields}
26+
onSubmit={(values) => console.log('Form submitted:', values)}
27+
submitLabel="Sign Up"
28+
/>
29+
</div>
30+
);
31+
};
32+
33+
export const FormWithSelect = () => {
34+
const fields = [
35+
{
36+
name: 'name',
37+
label: 'Name',
38+
type: 'text' as const,
39+
placeholder: 'Enter your name',
40+
required: true,
41+
},
42+
{
43+
name: 'role',
44+
label: 'Role',
45+
type: 'select' as const,
46+
placeholder: 'Select your role',
47+
required: true,
48+
options: [
49+
{ label: 'Developer', value: 'developer' },
50+
{ label: 'Designer', value: 'designer' },
51+
{ label: 'Product Manager', value: 'pm' },
52+
],
53+
},
54+
];
55+
56+
return (
57+
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
58+
<Form
59+
fields={fields}
60+
onSubmit={(values) => console.log('Form submitted:', values)}
61+
submitLabel="Update Profile"
62+
/>
63+
</div>
64+
);
65+
};
66+
67+
export const FormWithInitialValues = () => {
68+
const fields = [
69+
{
70+
name: 'name',
71+
label: 'Name',
72+
type: 'text' as const,
73+
placeholder: 'Enter your name',
74+
required: true,
75+
},
76+
{
77+
name: 'email',
78+
label: 'Email',
79+
type: 'email' as const,
80+
placeholder: 'Enter your email',
81+
required: true,
82+
},
83+
{
84+
name: 'role',
85+
label: 'Role',
86+
type: 'select' as const,
87+
placeholder: 'Select your role',
88+
required: true,
89+
options: [
90+
{ label: 'Developer', value: 'developer' },
91+
{ label: 'Designer', value: 'designer' },
92+
{ label: 'Product Manager', value: 'pm' },
93+
],
94+
},
95+
];
96+
97+
const initialValues = {
98+
name: 'John Doe',
99+
email: '[email protected]',
100+
role: 'developer',
101+
};
102+
103+
return (
104+
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
105+
<Form
106+
fields={fields}
107+
initialValues={initialValues}
108+
onSubmit={(values) => console.log('Form submitted:', values)}
109+
submitLabel="Save Changes"
110+
/>
111+
</div>
112+
);
113+
};

‎bit-components/design/patterns/form/form.docs.mdx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
description: A flexible form component that uses our UI components for consistent styling and behavior.
3+
labels: ['react', 'form', 'pattern', 'test']
4+
---
5+
6+
import { BasicForm, FormWithSelect, FormWithInitialValues } from './form.composition';
7+
8+
# Form
9+
10+
A flexible form component that combines our UI components (Input, Dropdown, Button) to create consistent and accessible forms.
11+
12+
## Features
13+
14+
- Support for text, email, password, and select inputs
15+
- Form validation
16+
- Error messages
17+
- Required field indicators
18+
- Initial values support
19+
- Customizable submit button text
20+
- Responsive design
21+
- Accessible form controls
22+
23+
## Usage
24+
25+
```tsx
26+
import { Form } from '@your-scope/patterns/form';
27+
28+
const fields = [
29+
{
30+
name: 'name',
31+
label: 'Name',
32+
type: 'text',
33+
placeholder: 'Enter your name',
34+
required: true,
35+
},
36+
{
37+
name: 'email',
38+
label: 'Email',
39+
type: 'email',
40+
placeholder: 'Enter your email',
41+
required: true,
42+
},
43+
];
44+
45+
function MyComponent() {
46+
return (
47+
<Form
48+
fields={fields}
49+
onSubmit={(values) => console.log(values)}
50+
submitText="Submit"
51+
/>
52+
);
53+
}
54+
```
55+
56+
## Examples
57+
58+
### Basic Form
59+
60+
<BasicForm />
61+
62+
### Form with Select Field
63+
64+
<FormWithSelect />
65+
66+
### Form with Initial Values
67+
68+
<FormWithInitialValues />

‎bit-components/design/patterns/form/form.module.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.form {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1rem;
5+
}
6+
7+
.field {
8+
display: flex;
9+
flex-direction: column;
10+
gap: 0.25rem;
11+
}
12+
13+
.label {
14+
font-size: 0.875rem;
15+
font-weight: 500;
16+
color: #374151;
17+
}
18+
19+
.required {
20+
color: #ef4444;
21+
margin-left: 0.25rem;
22+
}
23+
24+
.error {
25+
font-size: 0.875rem;
26+
color: #ef4444;
27+
}
28+
29+
.submitButton {
30+
width: 100%;
31+
}

0 commit comments

Comments
 (0)