Skip to content

Commit

Permalink
docs: rest of data-entry components update
Browse files Browse the repository at this point in the history
  • Loading branch information
nastyastavitskaya committed Dec 23, 2024
1 parent 5bfeefb commit 2033533
Show file tree
Hide file tree
Showing 20 changed files with 570 additions and 206 deletions.
12 changes: 9 additions & 3 deletions docs/components/Data Entry/QueryItem/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,14 @@ import * as QueryItemStories from '../../../../src/components/data-entry/QueryIt

# QueryItem

This is the documentation for the QueryItems component

{/* Documentation goes here */}
QueryItems are the essential elements used for query builders such as **Analysis Builder**, **Audience Builder**, or **Prediction Builder**. They work together to form clauses that power query logic.
#### **Types of QueryItems**
There are four types of QueryItems, each serving a specific purpose:
1. **ValueSelector**: Used to select a specific value from a list or range.
2. **Qualifier**: Defines conditions, such as operators (e.g., equals, greater than).
3. **Text**: Allows free-form text input for custom queries or descriptions.
4. **Action**: Provides interactive options, such as adding or removing query items.
#### **When To Use**
- To build queries for analytical tools like Audience Builder or Analysis Builder.

<Canvas meta={QueryItemStories.default} />
17 changes: 14 additions & 3 deletions docs/components/Data Entry/Radio/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,19 @@ import * as RadioStories from '../../../../src/components/data-entry/Radio/Radio

# Radio

This is the documentation for the Radios component
#### Overview
Used to select a single state from multiple options.

{/* Documentation goes here */}
#### **When To Use**
- To select a single state from multiple options.
- Unlike **[select](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-select--primary)**, **Radio** is always visible, helping users easily compare choices.
- Use **Radio** when there are few options to avoid overwhelming the user.

#### Related Links

| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [Radio Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=395-10973&p=f&t=zURbLpG60aM6aJiH-0) |
| AntD | [Radio Component](https://ant.design/components/radio) |

<Canvas meta={RadioStories.default} />
<Canvas of={RadioStories.Primary} />
3 changes: 2 additions & 1 deletion docs/components/Data Entry/Select/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ Select component allows users to select the necessary record from a list.
| Type | Resource |
| ------ | -------- |
| Eames | [Select Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=1217-31707&t=5iHsAw2QyK8Lx8zt-4) |
| AntD | [Select Component](https://ant.design/components/select) |

{/* Documentation goes here */}

<Canvas meta={SelectStories.default} />
<Canvas meta={SelectStories.default} />
13 changes: 11 additions & 2 deletions docs/components/Data Entry/Switch/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,18 @@ import * as SwitchStories from '../../../../src/components/data-entry/Switch/Swi
{/* Documentation goes here */}

# Switch
#### Overview
Used to toggle between two states.

This is the documentation for the Switchs component
#### **When To Use**
- To represent the switching between two states, such as an on-off state.
- Use **Switch** when the state change happens immediately upon toggling.
- Use **[Checkbox](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-checkbox--primary)** for state marking, which typically requires a submit operation to apply changes.

{/* Documentation goes here */}
#### Related Links
| Type | Resource |
| ------ | -------- |
| Eames | [Switch Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=396-12305&p=f&t=hGHFK3BQiEoVHZ6E-0) |
| AntD | [Switch Component](https://ant.design/components/switch) |

<Canvas meta={SwitchStories.default} />
13 changes: 11 additions & 2 deletions docs/components/Data Entry/TreeSelect/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,18 @@ import * as TreeSelectStories from '../../../../src/components/data-entry/TreeSe
{/* Documentation goes here */}

# TreeSelect
#### Overview
**TreeSelect** is similar to Select, but the values are provided in a tree-like structure.

This is the documentation for the TreeSelects component
#### **When To Use**
- Use **TreeSelect** when data entries are defined in a hierarchical manner.
- Ideal for scenarios like categorized data with parent-child relationships

{/* Documentation goes here */}
#### Related Links

| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [TreeSelect Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=396-13800&p=f&t=tFDp4mtk1zJJUroL-0) |
| AntD | [TreeSelect Component](https://ant.design/components/tree-select) |

<Canvas meta={TreeSelectStories.default} />
14 changes: 12 additions & 2 deletions docs/components/Data Entry/Upload/Documentation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,19 @@ import * as UploadStories from '../../../../src/components/data-entry/Upload/Upl
{/* Documentation goes here */}

# Upload
#### Overview
Used to select and upload files or drag and drop files.

This is the documentation for the Uploads component
#### **When To Use**
- When you need to upload one or more files.
- When you want to allow file uploads via drag-and-drop.
- When you need to display the upload process (e.g., progress indicators).

{/* Documentation goes here */}
#### Related Links

| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [Upload Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=396-13801&p=f&t=qTxTI3nmyrN7o7DQ-0) |
| AntD | [Upload Component](https://ant.design/components/upload) |

<Canvas meta={UploadStories.default} />
2 changes: 1 addition & 1 deletion src/components/data-entry/QueryItem/QueryItem.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ export default meta

type Story = StoryObj<typeof QueryItem>

export const DontUseThisOrYouWillBeFired: Story = {}
export const Primary: Story = {}
13 changes: 11 additions & 2 deletions src/components/data-entry/QueryItem/QueryItem.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
import React from 'react'
import { Center, Typography } from 'src/components'
import ValueSelector from 'src/components/data-entry/QueryItem/ValueSelector'
import Action from 'src/components/data-entry/QueryItem/Action'
import Text from 'src/components/data-entry/QueryItem/Text'
import Qualifier from 'src/components/data-entry/QueryItem/Qualifier'

export const QueryItem = () => {
return <>DO NOT USE THIS OR YOU WILL BE FIRED!</>
return (
<Center>
<Typography.Text>
Component Candidate: Under Review
<br />
This component is pending review and should not be used at this time.
</Typography.Text>
</Center>
)
}
QueryItem.Action = Action
QueryItem.Qualifier = Qualifier
QueryItem.ValueSelector = ValueSelector
QueryItem.Text = Text
QueryItem.Text = Text
32 changes: 2 additions & 30 deletions src/components/data-entry/Radio/Radio.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const meta: Meta<typeof Radio> = {
component: Radio,

args: {
autoFocus: false,
checked: false,
defaultChecked: false,
disabled: false,
Expand All @@ -23,36 +22,9 @@ type Story = StoryObj<typeof Radio>
Customize the stories based on specific requirements.
*/

export const Primary: Story = {}

export const WithAutoFocus: Story = {
args: {
autoFocus: true,
},
}

export const Checked: Story = {
export const Primary: Story = {
args: {
checked: true,
},
}

export const DefaultChecked: Story = {
args: {
defaultChecked: true,
},
}

export const Disabled: Story = {
args: {
disabled: true,
},
}

export const WithOnChange: Story = {
args: {
onChange: () => {
alert('Radio Changed')
},
children: 'All users',
},
}
2 changes: 1 addition & 1 deletion src/components/data-entry/Radio/RadioButton.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
import { Radio } from 'src/components/data-entry/Radio/Radio'

const meta: Meta<typeof Radio.Button> = {
title: 'Components/Data Entry/Radio/RadioButton',
title: 'Components/Not Prod Ready/Data Entry/Radio/RadioButton',
component: Radio.Button,

args: {
Expand Down
35 changes: 11 additions & 24 deletions src/components/data-entry/Radio/RadioGroup.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,8 @@ const meta: Meta<typeof Radio.Group> = {
component: Radio.Group,

args: {
buttonStyle: undefined,
defaultValue: undefined,
disabled: false,
name: undefined,
options: undefined,
optionType: undefined,
size: 'middle',
value: undefined,
onChange: undefined,
children: undefined,
Expand All @@ -22,33 +17,25 @@ export default meta

type Story = StoryObj<typeof Radio.Group>

export const WithOptionsAndOptionType: Story = {
export const WithEnvOptions: Story = {
args: {
options: [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', title: 'Orange' },
{ label: 'Production', value: 'production' },
{ label: 'Development', value: 'development' },
{ label: 'Production & Development', value: 'unknown' },
],
defaultValue: 'development',
optionType: 'default',
},
}

export const WithRadioButtons: Story = {
export const WithButtonOptionsType: Story = {
args: {
defaultValue: 'a',
children: [
<Radio.Button key="a" value="a">
Hangzhou
</Radio.Button>,
<Radio.Button key="b" value="b">
Shanghai
</Radio.Button>,
<Radio.Button key="c" value="c">
Beijing
</Radio.Button>,
<Radio.Button key="d" value="d">
Chengdu
</Radio.Button>,
options: [
{ label: 'Overview', value: 'overview' },
{ label: 'Connections', value: 'connections' },
],
defaultValue: 'overview',
optionType: 'button',
},
}
54 changes: 54 additions & 0 deletions src/components/data-entry/Radio/RadioGroupNotProdReady.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { type Meta, type StoryObj } from '@storybook/react'
import { Radio } from 'src/components/data-entry/Radio/Radio'

const meta: Meta<typeof Radio.Group> = {
title: 'Components/Not Prod Ready/Data Entry/Radio/RadioGroup',
component: Radio.Group,

args: {
buttonStyle: undefined,
defaultValue: undefined,
disabled: false,
name: undefined,
options: undefined,
optionType: undefined,
size: 'middle',
value: undefined,
onChange: undefined,
children: undefined,
},
}
export default meta

type Story = StoryObj<typeof Radio.Group>

export const WithOptionsAndOptionType: Story = {
args: {
options: [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', title: 'Orange' },
],
optionType: 'default',
},
}

export const WithRadioButtons: Story = {
args: {
defaultValue: 'a',
children: [
<Radio.Button key="a" value="a">
Hangzhou
</Radio.Button>,
<Radio.Button key="b" value="b">
Shanghai
</Radio.Button>,
<Radio.Button key="c" value="c">
Beijing
</Radio.Button>,
<Radio.Button key="d" value="d">
Chengdu
</Radio.Button>,
],
},
}
56 changes: 56 additions & 0 deletions src/components/data-entry/Radio/RadioNotProdReady.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { type Meta, type StoryObj } from '@storybook/react'
import { Radio } from 'src/components/data-entry/Radio/Radio'

const meta: Meta<typeof Radio> = {
title: 'Components/Not Prod Ready/Data Entry/Radio',
component: Radio,

args: {
autoFocus: false,
checked: false,
defaultChecked: false,
disabled: false,
value: undefined,
onChange: undefined,
},
}
export default meta

type Story = StoryObj<typeof Radio>

/*
Initial story templates generated by AI.
Customize the stories based on specific requirements.
*/

export const WithAutoFocus: Story = {
args: {
autoFocus: true,
},
}

export const Checked: Story = {
args: {
checked: true,
},
}

export const DefaultChecked: Story = {
args: {
defaultChecked: true,
},
}

export const Disabled: Story = {
args: {
disabled: true,
},
}

export const WithOnChange: Story = {
args: {
onChange: () => {
alert('Radio Changed')
},
},
}
12 changes: 11 additions & 1 deletion src/components/data-entry/Select/Select.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,14 @@ export default meta

type Story = StoryObj<typeof Select>

export const Primary: Story = {}
export const Primary: Story = {
args: {
placeholder: 'Select Environment',
options: [
{ label: 'All', value: 'all' },
{ label: 'Prod', value: 'prod' },
{ label: 'Dev', value: 'dev' },
],
style: { width: '180px' },
},
}
Loading

0 comments on commit 2033533

Please sign in to comment.