Skip to content

Commit

Permalink
Merge pull request #15 from kaiachain/dev
Browse files Browse the repository at this point in the history 
Update version to v0.1.14
  • Loading branch information
@skqksh
skqksh authored Oct 11, 2024
2 parents b111e32 + ed37bce commit aebf3c1
Show file tree
Hide file tree
Showing 8 changed files with 590 additions and 67 deletions.
53 changes: 53 additions & 0 deletions example/src/Home/Icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { KaIcon, KaText } from '@kaiachain/kaia-design-system'
import { Row } from './components/Row'

const Icons = () => {
return (
<>
<KaText fontType="title/lg_700">Icons</KaText>

<KaIcon.SearchNormal style={{ width: 20, height: 30 }} stroke="blue" />
<KaIcon.Chevron_bottom style={{ width: 30, height: 20 }} stroke="blue" />
<Row>
<KaIcon.KaiaBrandmark_white
style={{ width: 20, height: 20 }}
stroke="blue"
/>
<KaIcon.KaiaBrandmark_neonlime style={{ width: 20, height: 20 }} />
<KaIcon.KaiaBrandmark_black style={{ width: 20, height: 20 }} />
<KaIcon.KaiaWordmark_white
style={{ width: 50, height: 20 }}
stroke="blue"
/>

<KaIcon.KaiaWordmark_neonlime style={{ width: 50, height: 20 }} />
<KaIcon.KaiaWordmark_black style={{ width: 50, height: 20 }} />
</Row>
<Row>
<KaIcon.Dark_Symbol_KaiaCritters style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaCritters style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaSquare style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaSquare style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaPortal style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaPortal style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaScan style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaScan style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaDoc style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaDoc style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaGovernanceForum
style={{ width: 60, height: 60 }}
/>
<KaIcon.Light_Symbol_KaiaGovernanceForum
style={{ width: 60, height: 60 }}
/>
<KaIcon.Dark_Symbol_KaiaDevHub style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaDevHub style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaWallet style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaWallet style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaDevForum style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaDevForum style={{ width: 60, height: 60 }} />
</Row>
</>
)
}
export default Icons
202 changes: 141 additions & 61 deletions example/src/Home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,20 @@ import styled from 'styled-components'

import {
KaLabel,
KaIcon,
KaText,
useKaTheme,
KaRadio,
KaTextInput,
KaButton,
KaSelectBox,
KaIcon,
} from '@kaiachain/kaia-design-system'

import { Row } from './components/Row'
import Buttons from './Buttons'
import CheckBoxes from './CheckBoxes'
import Texts from './Texts'
import Icons from './Icons'
import { useState } from 'react'
import { View } from './components/View'

Expand Down Expand Up @@ -45,6 +47,7 @@ const Home = ({
}) => {
const { getTheme } = useKaTheme()
const [value, setValue] = useState<string>('')
const [selected, setSelected] = useState<string>('')

return (
<StyledContainer style={{ backgroundColor: getTheme('gray', '10') }}>
Expand Down Expand Up @@ -96,70 +99,146 @@ const Home = ({
</StyledSection>
<StyledSection>
<KaText fontType="title/lg_700">Icons</KaText>

<KaIcon.SearchNormal
style={{ width: 20, height: 30 }}
stroke="blue"
/>
<KaIcon.Chevron_bottom
style={{ width: 30, height: 20 }}
stroke="blue"
/>
<Row>
<KaIcon.KaiaBrandmark_white
style={{ width: 20, height: 20 }}
stroke="blue"
/>
<KaIcon.KaiaBrandmark_neonlime style={{ width: 20, height: 20 }} />
<KaIcon.KaiaBrandmark_black style={{ width: 20, height: 20 }} />
<KaIcon.KaiaWordmark_white
style={{ width: 50, height: 20 }}
stroke="blue"
/>

<KaIcon.KaiaWordmark_neonlime style={{ width: 50, height: 20 }} />
<KaIcon.KaiaWordmark_black style={{ width: 50, height: 20 }} />
</Row>
<Row>
<KaIcon.Dark_Symbol_KaiaCritters
style={{ width: 60, height: 60 }}
/>
<KaIcon.Light_Symbol_KaiaCritters
style={{ width: 60, height: 60 }}
/>
<KaIcon.Dark_Symbol_KaiaSquare style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaSquare style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaPortal style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaPortal style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaScan style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaScan style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaDoc style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaDoc style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaGovernanceForum
style={{ width: 60, height: 60 }}
/>
<KaIcon.Light_Symbol_KaiaGovernanceForum
style={{ width: 60, height: 60 }}
/>
<KaIcon.Dark_Symbol_KaiaDevHub style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaDevHub style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaWallet style={{ width: 60, height: 60 }} />
<KaIcon.Light_Symbol_KaiaWallet style={{ width: 60, height: 60 }} />
<KaIcon.Dark_Symbol_KaiaDevForum
style={{ width: 60, height: 60 }}
/>
<KaIcon.Light_Symbol_KaiaDevForum
style={{ width: 60, height: 60 }}
/>
</Row>
<Icons />
</StyledSection>
<StyledSection>
<KaText fontType="title/lg_700">Labels</KaText>

<KaLabel size="md" color="red" text="text" type="solid" />
<KaLabel size="md" color="red" text="text" type="pale" />
<KaLabel size="xs" color="red" text="text" type="solid" />
<KaLabel size="sm" color="red" text="text" type="pale" />
<KaLabel size="md" color="red" text="text" type="line" />
<KaLabel size="md" color="red" text="text" type="paleBorder" />
<KaLabel size="lg" color="red" text="text" type="paleBorder" />
<KaLabel
color="blue"
text="text"
type="solid"
containerStyle={{ width: 200 }}
/>
<KaLabel
color="green"
text="text"
type="solid"
fontStyle={{ backgroundColor: 'red' }}
onClick={() => window.alert('clicked')}
/>
</StyledSection>
<StyledSection>
<KaText fontType="title/lg_700">SelectBox </KaText>
<KaText fontType="body/lg_400">
Normal with disabled option with img
</KaText>
<KaSelectBox
selectedValue={selected}
onSelect={setSelected}
optionList={[
{
value: '0',
label: 'Option 1',
img: 'https://square-file.qa.klaytn.net/files/profile/default.png',
},
{ value: '1', label: 'Disabled Option2', isDisabled: true },
{ value: '2', label: 'Option 3' },
]}
/>
<KaText fontType="body/lg_400">
Width with nesting choices with img and maxheight
</KaText>
<KaSelectBox
selectedValue={selected}
onSelect={setSelected}
containerStyle={{ width: '500px' }}
maxHeight="150px"
optionList={[
{
value: '7',
label: 'Option Group 1',
subItems: [
{
value: '3',
label: 'SubItem 1',
img: 'https://square-file.qa.klaytn.net/files/profile/default.png',
subItems: [
{
value: '5',
label: 'More SubItem 1',
img: 'https://square-file.qa.klaytn.net/files/profile/default.png',
},
{ value: '6', label: 'More SubItem 2' },
],
},
{ value: '4', label: 'SubItem 2' },
],
},
{ value: '8', label: 'Option 4' },
{ value: '9', label: 'Option 5' },
]}
></KaSelectBox>
<KaText fontType="body/lg_400">
Long choices with more levels but no icon
</KaText>
<KaSelectBox
selectedValue={selected}
onSelect={setSelected}
containerStyle={{ width: '300px' }}
indentIcon={false}
placeholder="Here is a placeholder"
optionList={[
{
value: '10',
label: 'Example very long choice and it will be abbreviated',
},
{ value: '11', label: 'Option 6' },
{
value: '12',
label: 'Option 7',
subItems: [
{
value: '15',
label: 'Animals',
subItems: [
{ value: '25', label: 'Tiger' },
{ value: '26', label: 'Dog' },
],
},
{
value: '24',
label: 'Colors',
subItems: [
{ value: '27', label: 'Yellow' },
{ value: '28', label: 'Orange' },
],
},
],
},
{ value: '13', label: 'Option 8' },
{ value: '14', label: 'Option 9' },
]}
></KaSelectBox>
<KaText fontType="body/lg_400">Disabled</KaText>
<KaSelectBox
disabled={true}
selectedValue={selected}
onSelect={setSelected}
placeholder="Disabled selectbox"
optionList={[
{
value: '15',
label: 'will not be shown',
},
]}
></KaSelectBox>
<KaText fontType="body/lg_400">Error</KaText>
<KaSelectBox
isError={true}
selectedValue={selected}
onSelect={setSelected}
placeholder="Error selectbox"
optionList={[
{
value: '16',
label: 'Error',
},
]}
></KaSelectBox>
</StyledSection>
<StyledSection>
<KaText fontType="title/lg_700">TextInput</KaText>
Expand Down Expand Up @@ -253,6 +332,7 @@ const Home = ({
disabled={true}
/>
</StyledSection>

<StyledSection>
<KaText fontType="title/lg_700">Custom </KaText>
<StyledCustom>CustomCustomCustom</StyledCustom>
Expand Down
8 changes: 7 additions & 1 deletion example/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,11 +542,12 @@
"@jridgewell/sourcemap-codec" "^1.4.14"

"@kaiachain/kaia-design-system@file:..":
version "0.1.8"
version "0.1.11"
dependencies:
"@emotion/react" "^11.11.4"
"@emotion/styled" "^11.11.5"
react "^18.3.1"
react-click-away-listener "^2.2.3"
react-dom "^18.3.1"

"@nodelib/[email protected]":
Expand Down Expand Up @@ -1694,6 +1695,11 @@ queue-microtask@^1.2.2:
resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==

react-click-away-listener@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/react-click-away-listener/-/react-click-away-listener-2.2.3.tgz#a5c3e37d94cc86dac3546dbb753db14bacb63186"
integrity sha512-p63JRQtK9d085+QHUJ2Pje22P/N4tEaXsS2x7tbbptriQqZ9o8xEk7G1JrxwND5YmEVc/VO4fC3+cSBsqqgLUQ==

react-dom@^18.2.0, react-dom@^18.3.1:
version "18.3.1"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kaiachain/kaia-design-system",
"version": "0.1.13",
"version": "0.1.14",
"license": "MIT",
"type": "module",
"main": "dist/index.js",
Expand Down Expand Up @@ -38,6 +38,7 @@
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^16.0.0",
"@types/jest": "^29.5.12",
"@types/lodash": "^4.17.10",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"babel-jest": "^29.7.0",
Expand All @@ -54,6 +55,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"react": "^18.3.1",
"react-click-away-listener": "^2.2.3",
"react-dom": "^18.3.1"
}
}
11 changes: 10 additions & 1 deletion src/components/Label/Label.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,19 @@ export type KaLabelProps = {
size?: 'xs' | 'sm' | 'md' | 'lg'
color: 'red' | 'gray' | 'blue' | 'green' | 'yellow' | 'primary'
type?: 'solid' | 'pale' | 'line' | 'paleBorder'
containerStyle?: React.CSSProperties
fontStyle?: React.CSSProperties
onClick?: () => void
}

export const KaLabel = ({
size = 'sm',
text,
color,
type = 'solid',
containerStyle,
fontStyle,
onClick,
}: KaLabelProps): ReactElement => {
const { getTheme } = useKaTheme()

Expand Down Expand Up @@ -121,9 +127,12 @@ export const KaLabel = ({
backgroundColor,
outlineColor,
height,
cursor: onClick ? 'pointer' : 'default',
...containerStyle,
}}
onClick={onClick}
>
<KaText fontType={fontType} color={fontColor}>
<KaText fontType={fontType} color={fontColor} style={fontStyle}>
{text}
</KaText>
</StyledContainer>
Expand Down
Loading

0 comments on commit aebf3c1

Please sign in to comment.