trendyol/baklava-react-native

baklava-react-native's Issues

Image Component

Design

Figma Design Document

Implementation

General usage example:

<Image bordered={false} width={200} height={200} />

Rules

• Image component has a bordered to keep the contrast between the image that placed and the background.
• Size is 48x72 px by default, it can be customized.
• Images fit into the frame at their smallest edges.
• Should respect to contribution guideline

API Reference:

Image component

An image is a graphic representation of something or someone.

Properties

Property	Description	Default Value
bordered (boolean)	gray border of image	true
width (number)	image width	48
height (number)	image height	72

Button component should accept icon color manipulation

Is your feature request related to a problem? Please describe.
When I try to use the button component as an icon button in the header, I can't change the icon color and pressed state background color.

Describe the solution you'd like
The icon button should accept icon color and pressed color

List Component

Rating component

There is no proper working rating component especially in react native. I had to write my own and use it in my projects and production. It would be great to have one in baklava

Masked Input Component

Describe the solution you'd like

• currency input
• email input
• phone input

Badge size is different with and without an icon.

Describe the bug
Badge size is different with and without an icon.

Screenshots

TextLink Component

Design

Figma Design Document

Implementation

General usage example:

const [isPressed, setIsPressed] = useState(false)
// ...
<TextLink 
  variant="subtitle3Medium" 
  onPress={() => setIsPressed(true)} 
  isPressed={isPressed}
>
  Example
</TextLink>

Rules

Put some rules about how this component should behave and implemented

• Text should be pressable

API Reference:

TextLink component

Text link is a navigational element that takes a user to another URL, an element within a page, or a file.

Properties

Property	Description	Default Value
variant (string)	The variant of the Text style to use	body2
isPressed (boolean)	The pressed state of the TextLink	false
onPress (function)	The onPress function of the TextLink	-

TextArea Component

Design

Figma Design Document

Implementation

General usage example:

<TextArea label="Lorem" placeHolder="Lorem" size="small" maxLength={200} />

Rules

• Use the Text Area component full width with 16px padding from left and right.
• Text areas height can be fixed or it can hug the content. By default, the height of the text area are fixed at 4 rows.
• There are 3 types of text area by labeling: With Label, Inline Label and Without Label.
• They can display the following states: default, focused, typing, entered, and disabled.
• Should respect to contribution guideline

API Reference:

TextArea component

Text areas let users enter and edit text.

Properties

Property	Description	Default Value
label (string)	content string	-
labelFixed (boolean)	inline label type	false
placeHolder (string )	The string that will be rendered before text input has been entered.	-
disabled (boolean)	disable state of textArea	false
helpText (string)	Helper text providing information for the input.	-
counterText (string)	Counts the length of the textArea	-
error (boolean)	Boolean value indicating the error status.	false
errorText (string)	Helper text showing the error in the input.	-
maxLength (number)	max length of content	200
maxLengthErrorText (string)	Helper text showing the error if exceed maxLength	-
size (large | medium | small)	size of TextArea	medium

Tabs Component

Design

Figma Design Document

Implementation

General usage example:

  const [value, setValue] = useState("tab1");
  //...
  <Tabs value={value} onValueChange={setValue}>
    <Tabs.List>
      <Tabs.Option value="tab1" title="tab 1" caption="" badge={<Badge variant="" />} icon="" disabled>
      <Tabs.Option value="tab2" title="tab 2"  caption="" badge={<Badge variant="" />} icon="">
    </Tabs.List>
    <Tabs.Content value="tab1"><ContentView /></Tabs.Content>
    <Tabs.Content value="tab2"><ContentView /></Tabs.Content>
  </Tabs>

Rules

• A tab should contain a title and may contain caption, icon and badge.
• There should be a border between tabs. Don’t use border on the last tabs end.
• Tab title and caption texts are limited to one line.
• The default view is that one tab is preselected and is usually the first tab. Only one tab can be selected at a time. When a user chooses a new item, the previous tab is automatically deselected.
• Should respect to contribution guideline

API Reference:

Tabs component

Tabs are used to organize related content. They allow the user to navigate between groups of information that appear within the same context.

Tabs Properties

Property	Description	Default Value
value (string)	The value of the Tab	-
onValueChange (function)	The onValueChange function of the Tab	-
defaultValue (string)	The defaultValue of the Tab	-

Tabs.Option Properties

Property	Description	Default Value
value (string)	The value of the Tab	-
title (string)	The title of the Tab	-
caption (string)	The caption of the Tab	-
icon (string)	The icon of the Tab	-
badge (Badge)	The badge of the Tab	-
disabled (boolean)	The disabled state of the Tab	false
visible (boolean)	The visible state of the Tab	true

Alert Component

Design

Figma Design Document

Implementation

General usage example:

<Component>Example</Component>

Rules

Put some rules about how this component should behave and implemented

• Rule 1
• Rule 2

API Reference:

Component component

Description

Properties

Property	Description	Default Value
attr (string)	attr desc	-

Input Component

Design

Figma Design Document

Implementation

General usage example:

<Component>Example</Component>

Rules

Put some rules about how this component should behave and implemented

• Rule 1
• Rule 2

API Reference:

Component component

Description

Properties

Property	Description	Default Value
attr (string)	attr desc	-

Select Component

Design

Figma Design Document

Implementation

General usage example:

<Component>Example</Component>

Rules

Put some rules about how this component should behave and implemented

• Rule 1
• Rule 2

API Reference:

Component component

Description

Properties

Property	Description	Default Value
attr (string)	attr desc	-

Dropdown Component

Design

Figma Design Document

Implementation

General usage example:

<Component>Example</Component>

Rules

Put some rules about how this component should behave and implemented

• Rule 1
• Rule 2

API Reference:

Component component

Description

Properties

Property	Description	Default Value
attr (string)	attr desc	-

Badge texts are not bold on android

Describe the bug
Badge texts are bold on ios but not on android.

Input: The label contains text such as optional which cannot be changed by user.

Describe the bug
The optional text in the input component should be changeable.

To Reproduce
Steps to reproduce the behavior:

1. Add a input component with required false property.
2. Add a label title
3. See label as "foo-lable (optional)"
   Expected behavior
   As a user, I may not want to see text like 'optional'.

Screenshots

Smartphone:

• Device: iPhone15
• OS: iOS17
• Version: 2.7.1

Migrate to Restyle

We decided to drop styled-components and styled-system packages and switch to the @shopify/restyle package as the core styling mechanism.

PR: #28

Input Component

Design

Figma Design Document

Implementation

General usage example:

<Input size="large" placeholder="Large" />

API Reference:

Input component

The Input component allows a user to provide input in a text field.

Properties

Property	Description	Default Value
size (string)	The size of the button	medium
label (string)	The text or component to use for the floating label	-
labelFixed (boolean)	Boolean value that checks if the label is fixed.	false
placeholder (string)	The string that will be rendered before text input has been entered.	-
helpText (string)	Helper text providing information for the input.	-
errorText (string)	Helper text showing the error in the input.	-
successText (string)	Helper text showing the success in the input.	-
icon (string)	The icon shown in the input.	-
success (Boolean)	Boolean value indicating the success status.	false
error (boolean)	Boolean value indicating the error status.	false
secureTextEntry (boolean)	If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false.	false
required (Boolean)	Boolean value that controls whether the field is required.	false
disabled (boolean)	If true, user won't be able to interact with the component.	false
style (StyleProp<TextInputStyle>)	attr desc	-

DatePicker Component

Design

Figma Design Document

Implementation

General usage example:

<Component>Example</Component>

Rules

Put some rules about how this component should behave and implemented

• Rule 1
• Rule 2

API Reference:

Component component

Description

Properties

Property	Description	Default Value
attr (string)	attr desc	-

Documentation: Move design tokens to separate pages

Is your feature request related to a problem? Please describe.
The Sizes page contains sizes, font sizes, font weights, and border-radius.

• https://trendyol.github.io/baklava-react-native/?path=/docs/design-system-sizes--page

Describe the solution you'd like
These tokens should move to separate pages.

Radio Component

Design

Figma Design Document

Implementation

General usage example:

<Component>Example</Component>

Rules

Put some rules about how this component should behave and implemented

• Rule 1
• Rule 2

API Reference:

Component component

Description

Properties

Property	Description	Default Value
attr (string)	attr desc	-

Badge Component

Design

Figma Design Document

Implementation

     <Badge variant="success" text="Lorem Ipsum" />

Rules

• Use to show a status update on a piece of information or action.
• Use to mark something as a “draft” or “new”.
• Use when you want to highlight something that has been added recently.
• Use established color patterns so that users can clearly identify the importance level.
• Always position badge so that it’s clear to understand what object it’s related to.
• Don’t make badges clickable, instead use button component.

API Reference:

Badge component

Badge component can be used for highlighting a status or labeling an item.

Properties

Property	Description	Default Value
variant (string)	The variant of the badge style to use	default
icon (string)	The icon shown in the badge	-
size (string)	The size of the badge	medium
transparent (boolean)	Use key colors on the content without background	false

Tooltip Component

Design

Figma Design Document

Implementation

General usage example:

<Tooltip visible={true} >
   <Icon/>
</Tooltip>

Rules

• Default positioning for tooltip is on top of the component with 4px padding.
• Tooltip rearrange itself from its default position to be visible on the screen: Top (Default) and Bottom.
• The pin of the tooltip is centered on the component it opens.
• The width of the tooltip depends on the mobile screen size. Use full width with 16px padding from left and right.
• It is mandatory to use the close button to preserve the meaning of "it can be closed" on mobile devices.
• Clicking outside the tooltip, scrolling, and pressing the close button closes the tooltip.
• The tooltip can be opened by clicking on a specific area (component, icon, etc.) or after a certain period of time after the user lands on the screen.
• There can be text link in the tooltips.
• Opening a new tooltip immediately closes any other open tooltip.
• For the rich contents use Modal Component instead Tooltip.
• If the tooltip cannot be opened in the top position (for example: in the header and title on the page), it can be used in the bottom of the component.
• Should respect to contribution guideline

API Reference:

Tooltip component

Tooltips display informative text when users hover over, focus on, or tap an element.

Properties

Property	Description	Default Value
visible (boolean)	state of visibility	false
onClose (function)	close callback	-
content (string)	message of tooltip content	-

Some props of Button are not included in the document.

Describe the bug
Some props of Button are not included in the document. eg filled. Can it be checked and updated?

deneme

Text Component

Design

Figma Design Document

Implementation

General usage example:

<Text variant="heading2">Baklava Design System</Text>

Rules

Available variants:

Heading: heading1, heading2, heading3
Subtitle01: subtitle01Regular, subtitle01Medium, subtitle01Semibold, subtitle01Bold
Subtitle02: subtitle02Regular, subtitle02Medium, subtitle02Semibold, subtitle02Bold
Subtitle03: subtitle03Regular, subtitle03Medium, subtitle03Semibold, subtitle03Bold
Subtitle04: subtitle04Regular, subtitle04Medium, subtitle04Semibold, subtitle04Bold
Body: bodyText, bodyUnderline, bodyTextLink, bodyLongText
Caption: captionText, captionMedium, captionLongText, captionTextLink

API Reference:

Text component

Typography creates purposeful texture, guiding users to read and understand the hierarchy of information.

Properties

Property	Description	Default Value
variant (string)	Variant defines appropriate text styles for type role and its size	bodyText
children (required) (string)	-	-
style (StyleProp<TextStyle>)	StyleProp	-

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Box Component

Design

Figma Design Document

Implementation

General usage example:

<Box>
  <Text>This is a Box</Text>
</Box>

API Reference:

Box component

This is a generic component for low level layout needs. It is similar to a div in HTML and View in React Native.

Properties

Box implements View, flexbox, color, size, space, borders, borderRadius props

Button Component

Design

Figma Design Document

Implementation

General usage example:

<Button variant="primary" type="outline" size="large" label="Primary Button" />

API Reference:

Button component

A button is component that the user can press to trigger an action.

Properties

Property	Description	Default Value
variant (string)	The variant of the button style to use	primary
type (string)	The type of the button. To adjust the styling to give it desired emphasis	contained
size (string)	The size of the button	medium
style (StyleProp<PressableStyle>)	StyleProp	-

Toast Component

Design

Figma Design Document

Implementation

General usage example:

<Component>Example</Component>

Rules

Put some rules about how this component should behave and implemented

• Rule 1
• Rule 2

API Reference:

Component component

Description

Properties

Property	Description	Default Value
attr (string)	attr desc	-

Storybook v6.5 upgrade

https://storybook.js.org/blog/storybook-for-react-native-6-5/

No exports for the TextLink component

It seems there is no exports for the TextLink components.

Please see: https://github.com/Trendyol/baklava-react-native/blob/main/src/index.ts

Refactoring button variants

We added the mobile button sizes to design guide.

Badge: Background color cannot use the theme colors

Describe the bug
Badge's background color cannot use the colors in the theme.

Expected behavior
Given backgroundColor="featuredBackground" I see the featuredBackground color.

Screenshots

Expected:

TextArea: errorState's border color is not working properly.

Describe the bug
The border color of textArea's errorState must be dangerColor. In some cases it does not work properly.

Expected behavior
The border color must be dangerColor until errorState is false.

Screenshots

Switch Component

Design

Figma Design Document

Implementation

General usage example:

const [value, setValue] = useState(false);
const toggleValue = () => setValue(!value);
// ...
<Switch value={value} onValueChange={toggleValue} label="Label" />

Rules

• Switch design should be identical on both operating systems and should base on iOS.
• A switch is used to quickly switch between two possible states. They are commonly used for “on/off” switches.
• Switches shouldn’t require users to click a button to apply or save the setting.
• Should respect to contribution guideline

API Reference:

Switch component

Switches toggle the state of a single item on or off.

Properties

Property	Description	Default Value
label (string)	The label of the switch	-
value (boolean)	The value of the switch	false
onValueChange (function)	Callback called with the new value when it changes.	-
disabled (boolean)	The disabled state of the switch	false
onColor (Theme['colors'] | string)	The on color of the switch	"primaryKey"
offColor (Theme['colors'] | string)	The off color of the switch	"neutralLighter"
testID (string)	The testID of the switch	"switch-component"

Controlled switch does not work properly

Describe the bug
The switch component does not update when its value changes programmatically. Also, setting the initial value seems does not work.

To Reproduce
Use the switch component with the initial value and change the value from somewhere.

const [value, setValue] = React.useState(true)

return (
  <>
    <Switch
      value={value}
      onColor="#0BC15C"
      offColor="#FF5043"
      onValueChange={(value) => {
        setValue(value)
      }}
    />
    <Button label="Make it false" onPress={() => setValue(false)} />
  </>
)

Icon Component

Design

Figma Design Document

Implementation

General usage example:

<Icon name="confetti" color="primaryColor" size="xlarge" />

API Reference:

Icon component

Icon component is used to show some decorative icons.

Properties

Property	Description	Default Value
name (string)	Icon names are in the list, fixed and cannot be used outside the list	contentPrimary
size (string)	The size of the icon	large
style (StyleProp<PressableStyle>)	StyleProp	-

Modal Component

Design

Figma Design Document

Implementation

General usage example:

<Modal
   title="Title"
   closeButtonAction = { () => {} }
   actionButtonProps={{ onPress: () => {}, label: "text"}}
   secondActionButtonProps={{ onPress: () => {}, label: "text"}}
>
   <Box/>
</Modal>

Rules

• By default a modal contains a title, a close button and a primary action button.
• Modals are closeable. By default it closes by close button, and by clicking outside of the dialog.
• A modal should contain at least one content (text, image etc.).
• Only large buttons can be used in the action bar and there can be maximum 2 buttons (primary and secondary).
• Title is limited to 2 lines, above that it is displayed as “...”.
• Modals are always centered on the page, with an overlay behind them that hides the page content.
• Weight of the modal depends on the screen size. Modal is positioned with 16px padding from the page edges.
• Height of the modal depends on the content height. For long content that does not fit on the page, the dialog action area remains sticky at the bottom of the modal so that it appears on the page.
• Overlay has Neutral Darker Color (#273142) with %70 of opacity.
• Should respect to contribution guideline

API Reference:

Modal component

Modals inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Properties

Property	Description	Default Value
title (string)	title of modal	-
closeButtonAction (function)	close button action of modal	-
children (React.Component)	free area of modal	-
actionButtonProps (ButtonProps)	first buttons' actions	-
secondActionButtonProps (ButtonProps)	second buttons' actions	-

Checkbox Component

Design

Figma Design Document

Implementation

General usage example:

<Checkbox disable={false} checked={true} indeterminate={true} label="lorem ipsum" />

Rules

• Checkboxes can turn an option on or off.
• Users can select zero, one, or any number of items.
• Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.
• Should respect to contribution guideline

API Reference:

Checkbox component

Checkboxes allow users to select one or more items from a set.

Properties

Property	Description	Default Value
checked (boolean)	state of selected	false
indeterminate (boolean)	state of indeterminate	false
label (string)	label for checkbox	-
disabled (boolean)	state of disabled	false

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Spinner Component

Design

Figma Design Document

Implementation

General usage example:

<Spinner color="primaryKey" size="m" />

Rules

• The color should be changeable
• The size should be changeable
• The animation duration should be 1000ms
• Should respect to contribution guideline

API Reference:

Spinner component

Loading spinners are used when retrieving data or performing slow computations and help to notify users that loading is underway.

Properties

Property	Description	Default Value
color (ThemeColor or ColorValue)	spinner main color	primaryKey
size (string)	spinner size	m