diff --git a/.storybook/theme-decorator.tsx b/.storybook/theme-decorator.tsx index d616fd3..2cb66ac 100644 --- a/.storybook/theme-decorator.tsx +++ b/.storybook/theme-decorator.tsx @@ -1,33 +1,15 @@ import React from 'react'; -import { DARK_THEME, styled } from '../src/stitches.config'; +import { BrowserWindow } from '../src/components/browserWindow'; +import { styled } from '../src/stitches.config'; -const ThemeWrapper = styled('div', { - backgroundColor: '$bg_primary', - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'center', - px: '$4', - py: '$5', - width: '45.5%', +const Wrapper = styled('div', { height: '100vh', - mb: '$4', }); const ThemeDecorator = (storyFn: any) => ( -
- - {storyFn({ id: id => 'light-' + id })} - - - {storyFn({ id: id => 'dark-' + id })} - -
+ + {storyFn()} + ); export default ThemeDecorator; diff --git a/package.json b/package.json index 28e74ae..b28544e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "camara", - "version": "1.0.0-beta.77", + "version": "1.0.0-beta.84", "description": "A design system that helps you build your ideas quickly", "author": { "name": "Presh Onyee", diff --git a/src/components/avatar/avatar.stories.tsx b/src/components/avatar/avatar.stories.tsx index 3a941da..ec038f2 100644 --- a/src/components/avatar/avatar.stories.tsx +++ b/src/components/avatar/avatar.stories.tsx @@ -4,6 +4,7 @@ import { User } from 'react-feather'; import { Avatar, AvatarProps } from '.'; import { Box } from '../box'; import { Flex } from '../flex'; +import { BrowserWindow } from '../browserWindow'; export default { title: 'Components/Avatar', @@ -27,76 +28,82 @@ Base.args = { // types export const Types = (args: AvatarProps) => ( - - - - - - - - - } /> - } /> - } /> - } /> - - - - - - - - - - - - - - + + + + + + + + + + } /> + } + /> + } /> + } /> + + + + + + + + + + + + + + + ); // sizes diff --git a/src/components/box/box.tsx b/src/components/box/box.tsx index 2fa15b0..a39a125 100644 --- a/src/components/box/box.tsx +++ b/src/components/box/box.tsx @@ -25,9 +25,6 @@ export interface BoxProps extends HTMLAttributes { } const StyledBox: any = styled('div', { - boxSizing: 'border-box', - minWidth: 0, - display: 'block', variants: { center: { true: { diff --git a/src/components/browserWindow/browserChrome.tsx b/src/components/browserWindow/browserChrome.tsx new file mode 100644 index 0000000..419515d --- /dev/null +++ b/src/components/browserWindow/browserChrome.tsx @@ -0,0 +1,149 @@ +import React from 'react'; +import { styled } from '../../stitches.config'; +import { + ChevronLeft, + ChevronRight, + Layout, + Padlock, + Plus, + Refresh, + Share, + Shield, + Tabs, + TrafficLight, +} from './icons'; + +const Container = styled('div', { + display: 'flex', + padding: '$2', + flex: 1, + borderTopLeftRadius: '$3', + borderTopRightRadius: '$3', +}); + +const AddressBar = styled('div', { + py: '2px', + px: '$2', + display: 'flex', + flex: 1, + justifyContent: 'space-between', + alignItems: 'center', + borderRadius: '$2', + '& small': { + ml: '$1', + }, + '& .url': { + display: 'flex', + alignItems: 'center', + }, + '& .lock > *': { + width: '10px', + height: '10px', + }, + '& .refresh > *': { + width: '12px', + height: '12px', + }, +}); + +const LeftSide = styled('div', { + flex: 1, + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + '& .left': { + display: 'flex', + }, + '& .traffic_light > *': { + mx: '$2', + width: '36px', + height: '14px', + }, + '& .chevrons > *': { + mx: '$2', + width: '8px', + height: '12px', + }, + '& .layout > *': { + mx: '$3', + width: '16px', + height: '12px', + }, + '& .shield > *': { + mx: '$3', + width: '14px', + height: '14px', + }, +}); +const RightSide = styled('div', { + flex: 1, + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'center', + '& > *': { + mx: '$2', + width: '12px', + height: '12px', + }, +}); + +interface IChrome { + theme?: 'light' | 'dark'; +} + +export const BrowserChrome = ({ theme }: IChrome) => { + return ( + + +
+ + + + + + + + + + +
+ + + + + + + +
+ + + + + camara.space + +
+ + + + + + + + + + + + ); +}; diff --git a/src/components/browserWindow/browserWindow.tsx b/src/components/browserWindow/browserWindow.tsx new file mode 100644 index 0000000..4ccd50f --- /dev/null +++ b/src/components/browserWindow/browserWindow.tsx @@ -0,0 +1,116 @@ +import { Switch } from '../switch'; +import React, { useState } from 'react'; +import { Moon, Sun } from 'react-feather'; +import { DARK_THEME, styled } from '../../stitches.config'; +import { BrowserChrome } from './browserChrome'; + +const Wrapper = styled('div', { + backgroundRepeat: 'no-repeat', + backgroundSize: '100%', + width: '100%', + height: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', +}); + +const Container = styled('div', { + width: '90%', + height: '90%', + display: 'flex', + flexDirection: 'column', + paddingBottom: '$5', + '& span': { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + }, + '& span > small': { + fontWeight: '500', + color: '$text_primary', + marginRight: '$1', + }, +}); + +const BrowserWrapper = styled('div', {}); + +const BrowserBody = styled('div', { + height: '100%', + minHeight: '320px', + maxHeight: '640px', + backgroundColor: '$bg_primary', + borderBottomLeftRadius: '$3', + borderBottomRightRadius: '$3', + overflowY: 'auto', + px: '$4', + py: '$3', + '&::-webkit-scrollbar': { + width: '10px', + }, + '&::-webkit-scrollbar-track': { + borderRadius: '10px', + webkitBoxShadow: 'inset 0 0 6px #777', + boxShadow: 'inset 0 0 6px #777', + }, + '&::-webkit-scrollbar-thumb': { + borderRadius: '10px', + webkitBoxShadow: 'inset 0 0 6px #777', + boxShadow: 'inset 0 0 6px #777', + }, +}); + +interface Props { + children: React.ReactNode; +} + +export const BrowserWindow = ({ children }: Props) => { + const [useDarkTheme, setUseDarkTheme] = useState(false); + return ( + + + +
+ {useDarkTheme ? ( + + ) : ( + + )} +
+ + Dark Mode{' '} + setUseDarkTheme(!useDarkTheme)} + /> + + + + + {children} + + + + ); +}; diff --git a/src/components/browserWindow/icons/ChevronLeft.tsx b/src/components/browserWindow/icons/ChevronLeft.tsx new file mode 100644 index 0000000..ae00a33 --- /dev/null +++ b/src/components/browserWindow/icons/ChevronLeft.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const ChevronLeft = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/ChevronRight.tsx b/src/components/browserWindow/icons/ChevronRight.tsx new file mode 100644 index 0000000..6fc8a10 --- /dev/null +++ b/src/components/browserWindow/icons/ChevronRight.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const ChevronRight = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/Layout.tsx b/src/components/browserWindow/icons/Layout.tsx new file mode 100644 index 0000000..4328265 --- /dev/null +++ b/src/components/browserWindow/icons/Layout.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const Layout = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/Padlock.tsx b/src/components/browserWindow/icons/Padlock.tsx new file mode 100644 index 0000000..6698fc9 --- /dev/null +++ b/src/components/browserWindow/icons/Padlock.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const Padlock = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/Plus.tsx b/src/components/browserWindow/icons/Plus.tsx new file mode 100644 index 0000000..5c4af57 --- /dev/null +++ b/src/components/browserWindow/icons/Plus.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const Plus = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/Refresh.tsx b/src/components/browserWindow/icons/Refresh.tsx new file mode 100644 index 0000000..bb44bc7 --- /dev/null +++ b/src/components/browserWindow/icons/Refresh.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const Refresh = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/Share.tsx b/src/components/browserWindow/icons/Share.tsx new file mode 100644 index 0000000..fc75db6 --- /dev/null +++ b/src/components/browserWindow/icons/Share.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const Share = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/Shield.tsx b/src/components/browserWindow/icons/Shield.tsx new file mode 100644 index 0000000..1c627e0 --- /dev/null +++ b/src/components/browserWindow/icons/Shield.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const Shield = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/Tabs.tsx b/src/components/browserWindow/icons/Tabs.tsx new file mode 100644 index 0000000..d30f884 --- /dev/null +++ b/src/components/browserWindow/icons/Tabs.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { ITheme } from '.'; + +export const Tabs = ({ theme }: ITheme) => { + return ( + + + + ); +}; diff --git a/src/components/browserWindow/icons/TrafficLight.tsx b/src/components/browserWindow/icons/TrafficLight.tsx new file mode 100644 index 0000000..54774cf --- /dev/null +++ b/src/components/browserWindow/icons/TrafficLight.tsx @@ -0,0 +1,148 @@ +import React from 'react'; + +export const TrafficLight = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/components/browserWindow/icons/index.ts b/src/components/browserWindow/icons/index.ts new file mode 100644 index 0000000..4140a24 --- /dev/null +++ b/src/components/browserWindow/icons/index.ts @@ -0,0 +1,11 @@ +export * from './ChevronLeft'; +export * from './ChevronRight'; +export * from './Layout'; +export * from './Padlock'; +export * from './Plus'; +export * from './Refresh'; +export * from './Share'; +export * from './Shield'; +export * from './Tabs'; +export * from './TrafficLight'; +export * from './types'; diff --git a/src/components/browserWindow/icons/types.ts b/src/components/browserWindow/icons/types.ts new file mode 100644 index 0000000..e933d73 --- /dev/null +++ b/src/components/browserWindow/icons/types.ts @@ -0,0 +1,3 @@ +export interface ITheme { + theme?: 'light' | 'dark'; +} diff --git a/src/components/browserWindow/index.ts b/src/components/browserWindow/index.ts new file mode 100644 index 0000000..83393c6 --- /dev/null +++ b/src/components/browserWindow/index.ts @@ -0,0 +1 @@ +export * from './browserWindow' \ No newline at end of file diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 7979e83..302750a 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -1,3 +1,4 @@ +import { darken } from 'polished'; import React, { ButtonHTMLAttributes } from 'react'; import { styled } from '../../stitches.config'; @@ -15,8 +16,8 @@ export interface ButtonProps extends ButtonHTMLAttributes { const StyledButton = styled('button', { position: 'relative', fontFamily: '$body', - fontSize: '$3', - fontWeight: '$copy', + fontSize: '$4', + fontWeight: '$medium', borderRadius: '$2', borderWidth: '$1', borderStyle: 'solid', @@ -26,7 +27,7 @@ const StyledButton = styled('button', { variants: { variant: { primary: { - backgroundColor: '$button_background', + backgroundColor: '$button_primary', color: '$button_text', borderColor: 'transparent', '&:hover': { @@ -44,15 +45,17 @@ const StyledButton = styled('button', { }, secondary: { backgroundColor: 'transparent', - color: '$button_background', - borderColor: '$button_background', + color: '$button_primary', + border: '1px solid $button_primary', '&:hover': { - color: '$button_hover', + // color: '$button_hover', borderColor: '$button_hover', + backgroundColor: '$button_secondary', }, '&:active, &:focus': { - color: '$button_focus', + color: '$button_text', borderColor: '$button_focus', + backgroundColor: '$button_focus', }, '&:disabled': { color: '$text_disabled', @@ -62,7 +65,7 @@ const StyledButton = styled('button', { }, ghost: { backgroundColor: 'transparent', - color: '$button_background', + color: '$button_primary', borderColor: 'transparent', '&:hover': { color: '$button_hover', @@ -79,9 +82,9 @@ const StyledButton = styled('button', { }, }, size: { - large: { px: '$4', py: '$2' }, - medium: { px: '$3', py: '$1' }, - small: { px: '$2', py: '$1', fontSize: '$2' }, + large: { px: '$5', py: '$3' }, + medium: { px: '$4', py: '$2' }, + small: { px: '$3', py: '$1', fontSize: '$2' }, }, danger: { true: {}, @@ -126,11 +129,13 @@ const StyledButton = styled('button', { borderColor: '$button_danger', '&:hover': { color: '$button_dangerHover', - borderColor: '$button_dangerHover', + borderColor: '$button_danger_hover', + backgroundColor: '$button_danger_sec_hover', }, '&:active, &:focus': { - color: '$button_dangerFocus', + color: '$button_text', borderColor: '$button_dangerFocus', + backgroundColor: '$button_danger', }, '&:disabled': { color: '$text_disabled', @@ -157,6 +162,7 @@ const StyledButton = styled('button', { }, }, ], + defaultVariants: { size: 'medium', variant: 'primary' }, }); export const Button = React.forwardRef( @@ -169,7 +175,13 @@ export const Button = React.forwardRef( size={size} block={block} {...props} - css={{ backgroundColor: bg, color: color }} + css={{ + backgroundColor: bg, + color: color, + '&:hover': { + backgroundColor: bg ? darken(0.05, `${bg}`) : '', + }, + }} > {children} diff --git a/src/components/camaraTheme/camaraTheme.tsx b/src/components/camaraTheme/camaraTheme.tsx index 5763e61..8966e28 100644 --- a/src/components/camaraTheme/camaraTheme.tsx +++ b/src/components/camaraTheme/camaraTheme.tsx @@ -1,56 +1,18 @@ import React from 'react'; -import { Moon, Sun } from 'react-feather'; -import { DARK_THEME, styled } from '../../stitches.config'; import { globalStyles } from '../globalStyles'; +import { DARK_THEME } from '../../stitches.config'; interface ICamaraTheme { children: React.ReactNode; theme?: 'light' | 'dark'; } -const Wrapper = styled('div', { - display: 'flex', - flexDirection: 'row-reverse', - justifyContent: 'space-between', -}); - -const Toggle = styled('button', { - display: 'block', - width: '30px', - height: '30px', - marginLeft: '$3', - border: 'none', - borderRadius: '2rem', - padding: '4px', - backgroundColor: '$bgHighlight', - cursor: 'pointer', - '&:hover': { - backgroundColor: '$bgHighlightHover', - }, -}); - export const CamaraTheme: React.FunctionComponent = ({ children, + theme, }) => { - const [useDarkTheme, setUseDarkTheme] = React.useState(false); - globalStyles(); return ( - - setUseDarkTheme(!useDarkTheme)}> - {useDarkTheme ? ( - - ) : ( - - )} - -
{children}
- +
{children}
); }; diff --git a/src/components/heading/heading.stories.tsx b/src/components/heading/heading.stories.tsx index 2544b26..45ba7bb 100644 --- a/src/components/heading/heading.stories.tsx +++ b/src/components/heading/heading.stories.tsx @@ -21,8 +21,8 @@ Base.args = { // level export const Level = (args: HeadingProps) => ( - - + <> + <> The design and the making are inseparable... @@ -35,14 +35,8 @@ export const Level = (args: HeadingProps) => ( The design and the making are inseparable... - - The design and the making are inseparable... - - - The design and the making are inseparable... - - - + + <> 私の夢の仕事は、Microsoft❤でソフトウェアエンジニアとして働くことです。 @@ -55,14 +49,8 @@ export const Level = (args: HeadingProps) => ( 私の夢の仕事は、Microsoft❤でソフトウェアエンジニアとして働くことです。 - - 私の夢の仕事は、Microsoft❤でソフトウェアエンジニアとして働くことです。 - - - 私の夢の仕事は、Microsoft❤でソフトウェアエンジニアとして働くことです。 - - - + + ); // thin diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx index aa0741c..53ca913 100644 --- a/src/components/heading/heading.tsx +++ b/src/components/heading/heading.tsx @@ -10,16 +10,16 @@ export interface HeadingProps extends HTMLAttributes { textAlign?: 'initial' | 'left' | 'right' | 'center' | 'justify'; } -const StyledH1: any = styled('h1', { +const StyledH1 = styled('h1', { color: '$text_primary', }); -const StyledH2: any = styled('h2', { +const StyledH2 = styled('h2', { color: '$text_primary', }); -const StyledH3: any = styled('h3', { +const StyledH3 = styled('h3', { color: '$text_primary', }); -const StyledH4: any = styled('h4', { +const StyledH4 = styled('h4', { color: '$text_primary', }); @@ -70,6 +70,8 @@ export const Heading: React.FC = ({ Heading.defaultProps = { level: 1, + fontWeight: 'bold', + textAlign: 'left', }; Heading.displayName = 'Heading'; diff --git a/src/components/index.ts b/src/components/index.ts index 1e71f59..52873ea 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,7 @@ export * from './anchor'; export * from './avatar'; export * from './badge'; +export * from './browserWindow'; export * from './box'; export * from './button'; export * from './camaraTheme'; @@ -11,6 +12,7 @@ export * from './heading'; export * from './image'; export * from './input'; export * from './spacer'; +export * from './switch'; export * from './tag'; export * from './text'; export * from './textarea'; diff --git a/src/components/switch/index.ts b/src/components/switch/index.ts new file mode 100644 index 0000000..4dd2256 --- /dev/null +++ b/src/components/switch/index.ts @@ -0,0 +1 @@ +export * from './switch'; diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx new file mode 100644 index 0000000..310a057 --- /dev/null +++ b/src/components/switch/switch.tsx @@ -0,0 +1,129 @@ +import React from 'react'; +import { styled } from '../../stitches.config'; + +const Wrapper: any = styled('div', { + '.react-switch-checkbox': { + height: 0, + width: 0, + visibility: 'hidden', + }, + '.react-switch-label': { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + cursor: 'pointer', + width: '100px', + height: '50px', + background: 'grey', + borderRadius: '100px', + position: 'relative', + transition: 'grey .2s', + }, + '.react-switch-label .react-switch-button': { + content: '', + position: 'absolute', + top: '2px', + left: '2px', + width: '45px', + height: '45px', + borderRadius: '45px', + transition: '0.2s', + background: '#fff', + boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)', + }, + '.react-switch-checkbox:checked + .react-switch-label .react-switch-button': { + left: 'calc(100% - 2px)', + transform: 'translateX(-100%)', + }, + '.react-switch-label:active .react-switch-button': { + width: '60px', + }, + variants: { + size: { + small: { + '.react-switch-label': { + width: '50px', + height: '25px', + borderRadius: '50px', + transition: 'grey .2s', + }, + '.react-switch-label .react-switch-button': { + top: '2px', + left: '2px', + width: '20px', + height: '20px', + borderRadius: '45px', + transition: '0.2s', + }, + '.react-switch-checkbox:checked + .react-switch-label .react-switch-button': { + left: 'calc(100% - 2px)', + transform: 'translateX(-100%)', + }, + '.react-switch-label:active .react-switch-button': { + width: '25px', + }, + }, + large: { + '.react-switch-label': { + width: '100px', + height: '50px', + borderRadius: '100px', + transition: 'grey .2s', + }, + '.react-switch-label .react-switch-button': { + top: '2px', + left: '2px', + width: '45px', + height: '45px', + borderRadius: '45px', + transition: '0.2s', + }, + '.react-switch-checkbox:checked + .react-switch-label .react-switch-button': { + left: 'calc(100% - 2px)', + transform: 'translateX(-100%)', + }, + '.react-switch-label:active .react-switch-button': { + width: '60px', + }, + }, + }, + }, +}); + +interface SwitchProps { + id?: string; + isOn?: boolean; + handleToggle?: () => void; + onColor?: string; + size?: 'small' | 'large'; + css?: React.CSSProperties; +} + +export const Switch: React.FC = ({ + id, + isOn, + handleToggle, + onColor = '#088845', + size = 'small', + css, + ...rest +}) => { + return ( + + + + + ); +}; diff --git a/src/stitches.config.ts b/src/stitches.config.ts index 49cdd92..258a761 100644 --- a/src/stitches.config.ts +++ b/src/stitches.config.ts @@ -38,14 +38,16 @@ export const { text_error: '#E22121', text_success: '#28A745', button_text: '#FFFFFF', - button_background: '#088845', + button_primary: '#088845', + button_secondary: '#e7fef2', + btn_sec_hover: darken(0.05, '#e7fef2'), button_hover: '#01A14E', button_focus: darken(0.1, '#01A14E'), button_pressed: '#017337', // not in use button_danger: '#E22121', button_dangerHover: darken(0.1, '#FF4D4D'), button_dangerFocus: darken(0.2, '#FF4D4D'), - button_dangerPressed: '#AD0303', // not in use + button_danger_sec_hover: lighten(0.4, '#E22121'), primaryHighlight: darken(0.1, '#088845'), primaryExtraHighlight: darken(0.2, '#088845'), bgHighlight: darken(0.1, '#FFFFFF'), @@ -91,9 +93,10 @@ export const { 1: '4px', 2: '8px', 3: '16px', - 4: '32px', - 5: '64px', - 6: '128px', + 4: '24px', + 5: '32px', + 6: '64px', + 7: '128px', }, sizes: { 1: '4px', @@ -229,14 +232,16 @@ export const DARK_THEME = theme('dark-theme', { text_error: '#FF4D4D', text_success: '#1CBD00', button_text: '#000000', - button_background: '#37DAAA', + button_primary: '#37DAAA', + button_secondary: 'hsla(149, 89%, 70%, 0.14)', + btn_sec_hover: darken(0.3, 'hsla(149, 89%, 70%, 0.14)'), button_hover: '#28BE92', button_focus: lighten(0.1, '#28BE92'), button_pressed: '#0CB181', // not in use button_danger: '#FF4D4D', button_dangerHover: lighten(0.1, '#E22121'), button_dangerFocus: lighten(0.1, '#FF4D4D'), - button_dangerPressed: darken(0.2, '#FF4D4D'), // not in use + button_danger_sec_hover: darken(0.55, '#FF4D4D'), // not in use primaryHighlight: lighten(0.1, '#37DAAA'), primaryExtraHighlight: lighten(0.2, '#37DAAA'), bgHighlight: lighten(0.1, '#111111'), diff --git a/website/package.json b/website/package.json index 9538784..4d6aadf 100644 --- a/website/package.json +++ b/website/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@xstyled/styled-components": "^2.4.1", - "camara": "^1.0.0-beta.77", + "camara": "^1.0.0-beta.84", "gatsby": "^2.15.18", "gatsby-plugin-google-fonts": "^1.0.1", "gatsby-plugin-react-helmet": "^4.2.0", diff --git a/website/pages/docs/components/anchor.mdx b/website/pages/docs/components/anchor.mdx index e68f016..8ee1f04 100644 --- a/website/pages/docs/components/anchor.mdx +++ b/website/pages/docs/components/anchor.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/anchor/ --- -import { Anchor, CamaraTheme } from 'camara'; +import { Anchor, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; - + @@ -38,39 +38,39 @@ Anchor properties ### Basic Anchor ```jsx live noInline -import { Anchor, CamaraTheme } from 'camara'; +import { Anchor, BrowserWindow } from 'camara'; render( - + See photo - + ); ``` ### As Button ```jsx live noInline -import { Anchor, CamaraTheme } from 'camara'; +import { Anchor, BrowserWindow } from 'camara'; render( - + See photo - + ); ``` ### Open In New ```jsx live noInline -import { Anchor, CamaraTheme } from 'camara'; +import { Anchor, BrowserWindow } from 'camara'; render( - + See photo - + ); ``` diff --git a/website/pages/docs/components/avatar.mdx b/website/pages/docs/components/avatar.mdx index c1efbff..63305d8 100644 --- a/website/pages/docs/components/avatar.mdx +++ b/website/pages/docs/components/avatar.mdx @@ -4,7 +4,7 @@ section: Components slug: /docs/components/avatar/ --- -import { Avatar, Box, Flex, CamaraTheme } from 'camara'; +import { Avatar, Box, Flex, BrowserWindow } from 'camara'; import { User } from 'react-feather'; import { LiveConfig } from 'smooth-doc/components'; @@ -12,7 +12,7 @@ import { LiveConfig } from 'smooth-doc/components'; @@ -50,10 +50,10 @@ Unless where using an icon always provide the `imageSrc` and `imageAlt` props ### Size ```jsx live noInline -import { Avatar, CamaraTheme } from 'camara'; +import { Avatar, Box, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Shape ```jsx live noInline -import { Avatar, Box, CamaraTheme } from 'camara'; +import { Avatar, Box, BrowserWindow, Flex } from 'camara'; render( - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ); ``` ### Icon ```jsx live noInline -import { Avatar, CamaraTheme } from 'camara'; +import { Avatar, BrowserWindow } from 'camara'; import { User } from 'react-feather'; render( - + } /> } /> } /> } /> - + ); ``` ### Initial ```jsx live noInline -import { Avatar, CamaraTheme } from 'camara'; +import { Avatar, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Stories ```jsx live noInline -import { Avatar, CamaraTheme } from 'camara'; +import { Avatar, BrowserWindow } from 'camara'; render( - + - + ); ``` diff --git a/website/pages/docs/components/badge.mdx b/website/pages/docs/components/badge.mdx index 64da6d9..b4f9995 100644 --- a/website/pages/docs/components/badge.mdx +++ b/website/pages/docs/components/badge.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/badge/ --- -import { Badge, Box, CamaraTheme } from 'camara'; +import { Badge, Box, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -41,24 +41,24 @@ Badge properties ### Size ```jsx live noInline -import { Badge, CamaraTheme } from 'camara'; +import { Badge, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Shape ```jsx live noInline -import { Badge, Box, CamaraTheme } from 'camara'; +import { Badge, Box, BrowserWindow } from 'camara'; render( - + @@ -74,17 +74,17 @@ render( - + ); ``` ### Background Color ```jsx live noInline -import { Badge, Box, CamaraTheme } from 'camara'; +import { Badge, Box, BrowserWindow } from 'camara'; render( - + - + ); ``` diff --git a/website/pages/docs/components/box.mdx b/website/pages/docs/components/box.mdx index d512e96..727bbcd 100644 --- a/website/pages/docs/components/box.mdx +++ b/website/pages/docs/components/box.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/box/ --- -import { Box, Flex, Image, CamaraTheme } from 'camara'; +import { Box, Flex, Image, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -62,10 +62,10 @@ Box properties ### Basic Box ```jsx live noInline -import { Box, Flex, CamaraTheme } from 'camara'; +import { Box, Flex, BrowserWindow } from 'camara'; render( - + @@ -75,17 +75,17 @@ render( - + ); ``` ### Border ```jsx live noInline -import { Box, Flex, CamaraTheme } from 'camara'; +import { Box, Flex, BrowserWindow } from 'camara'; render( - + @@ -95,17 +95,17 @@ render( - + ); ``` ### Center ```jsx live noInline -import { Box, Flex, Image, CamaraTheme } from 'camara'; +import { Box, Flex, Image, BrowserWindow } from 'camara'; render( - + @@ -123,17 +123,17 @@ render( - + ); ``` ### Debug ```jsx live noInline -import { Box, Flex, CamaraTheme } from 'camara'; +import { Box, Flex, BrowserWindow } from 'camara'; render( - + @@ -143,7 +143,7 @@ render( - + ); ``` @@ -152,10 +152,10 @@ render( #### Top, Bottom, Left and Right Padding ```jsx live noInline -import { Box, Flex, CamaraTheme } from 'camara'; +import { Box, Flex, BrowserWindow } from 'camara'; render( - + @@ -173,17 +173,17 @@ render( - + ); ``` #### Horizontal and Vertical Padding ```jsx live noInline -import { Box, Flex, CamaraTheme } from 'camara'; +import { Box, Flex, BrowserWindow } from 'camara'; render( - + @@ -193,7 +193,7 @@ render( - + ); ``` @@ -202,10 +202,10 @@ render( #### Top, Bottom, Left and Right Margin ```jsx live noInline -import { Box, Flex, CamaraTheme } from 'camara'; +import { Box, Flex, BrowserWindow } from 'camara'; render( - + @@ -223,17 +223,17 @@ render( - + ); ``` #### Horizontal and Vertical Margin ```jsx live noInline -import { Box, Flex, CamaraTheme } from 'camara'; +import { Box, Flex, BrowserWindow } from 'camara'; render( - + @@ -243,6 +243,6 @@ render( - + ); ``` diff --git a/website/pages/docs/components/button.mdx b/website/pages/docs/components/button.mdx index 01deaac..fdc510e 100644 --- a/website/pages/docs/components/button.mdx +++ b/website/pages/docs/components/button.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/button/ --- -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -45,38 +45,38 @@ Button properties ### Variant ```jsx live noInline -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Size ```jsx live noInline -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Disabled ```jsx live noInline -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; render( - + @@ -88,17 +88,17 @@ render( - + ); ``` ### Danger ```jsx live noInline -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; render( - + @@ -110,17 +110,17 @@ render( - + ); ``` ### Pill ```jsx live noInline -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; render( - + @@ -132,17 +132,17 @@ render( - + ); ``` ### Block ```jsx live noInline -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; render( - + @@ -154,17 +154,17 @@ render( - + ); ``` ### Background color ```jsx live noInline -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; render( - + @@ -176,17 +176,17 @@ render( - + ); ``` ### Color ```jsx live noInline -import { Button, CamaraTheme } from 'camara'; +import { Button, BrowserWindow } from 'camara'; render( - + @@ -198,6 +198,6 @@ render( - + ); ``` diff --git a/website/pages/docs/components/card.mdx b/website/pages/docs/components/card.mdx index f8ddb2f..39c3937 100644 --- a/website/pages/docs/components/card.mdx +++ b/website/pages/docs/components/card.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/card/ --- -import { Box, Button, Card, Image, Text, Spacer, CamaraTheme } from 'camara'; +import { Box, Button, Card, Image, Text, Spacer, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -39,60 +39,45 @@ Card properties ### Elevate ```jsx live noInline -import { Button, Card, Image, Text, CamaraTheme } from 'camara'; +import { Button, Card, Image, Text, BrowserWindow } from 'camara'; render( - + woman in orange knit cap and blue jacket John Doe - - + ); ``` ### Bordered ```jsx live noInline -import { Box, Button, Card, Image, Text, Spacer, CamaraTheme } from 'camara'; +import { Box, Button, Card, Image, Text, Spacer, BrowserWindow } from 'camara'; render( - + woman in orange knit cap and blue jacket John Doe - - - - - - - John Doe - - - - - + ); ``` diff --git a/website/pages/docs/components/divider.mdx b/website/pages/docs/components/divider.mdx index 36dd1f3..a78d418 100644 --- a/website/pages/docs/components/divider.mdx +++ b/website/pages/docs/components/divider.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/divider/ --- -import { Box, Divider, CamaraTheme } from 'camara'; +import { Box, Divider, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -36,27 +36,27 @@ Divider properties ### Base ```jsx live noInline -import { Divider, CamaraTheme } from 'camara'; +import { Divider, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Types ```jsx live noInline -import { Box, Divider, CamaraTheme } from 'camara'; +import { Box, Divider, BrowserWindow } from 'camara'; render( - + - + ); ``` diff --git a/website/pages/docs/components/flex.mdx b/website/pages/docs/components/flex.mdx index 8ac600f..1e35aa3 100644 --- a/website/pages/docs/components/flex.mdx +++ b/website/pages/docs/components/flex.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/flex/ --- -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -41,10 +41,10 @@ Flex properties ### Basic Flex ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Direction - Column ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Direction - Row ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` @@ -139,10 +139,10 @@ render( #### Space Between ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` #### Space Around ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` #### Space Evenly ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` #### Center ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` #### Flex Start ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` #### Flex End ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Wrap ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Align Content ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + - + ); ``` diff --git a/website/pages/docs/components/heading.mdx b/website/pages/docs/components/heading.mdx index 692ab02..6db49cd 100644 --- a/website/pages/docs/components/heading.mdx +++ b/website/pages/docs/components/heading.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/heading/ --- -import { Box, Heading, CamaraTheme } from 'camara'; +import { Box, Heading, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -39,20 +39,26 @@ Heading properties ### Level ```jsx live noInline -import { Box, Heading, CamaraTheme } from 'camara'; +import { Box, Heading, BrowserWindow } from 'camara'; render( - + Intelligence designed to be helpful. Intelligence designed to be helpful. Intelligence designed to be helpful. Intelligence designed to be helpful. - Intelligence designed to be helpful. - Intelligence designed to be helpful. + +); +``` - +```jsx live noInline +import { Box, Heading, BrowserWindow } from 'camara'; + +render( + + 役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu. @@ -69,26 +75,18 @@ render( 役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu. - - 役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta - interijensu. - - - 役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta - interijensu. - - + ); ``` ### Thin ```jsx live noInline -import { Box, Heading, CamaraTheme } from 'camara'; +import { Box, Heading, BrowserWindow } from 'camara'; render( - + Intelligence designed to be helpful. @@ -102,12 +100,6 @@ render( Intelligence designed to be helpful. - - Intelligence designed to be helpful. - - - Intelligence designed to be helpful. - @@ -127,26 +119,18 @@ render( 役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu. - - 役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta - interijensu. - - - 役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta - interijensu. - - + ); ``` ### Align ```jsx live noInline -import { Box, Heading, CamaraTheme } from 'camara'; +import { Box, Heading, BrowserWindow } from 'camara'; render( - + Intelligence designed to be helpful. @@ -161,17 +145,17 @@ render( Intelligence designed to be helpful. - + ); ``` ### Color ```jsx live noInline -import { Box, Heading, CamaraTheme } from 'camara'; +import { Box, Heading, BrowserWindow } from 'camara'; render( - + Intelligence designed to be helpful. @@ -185,13 +169,7 @@ render( Intelligence designed to be helpful. - - Intelligence designed to be helpful. - - - Intelligence designed to be helpful. - - + ); ``` diff --git a/website/pages/docs/components/image.mdx b/website/pages/docs/components/image.mdx index c659bf2..9c2933e 100644 --- a/website/pages/docs/components/image.mdx +++ b/website/pages/docs/components/image.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/image/ --- -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -27,8 +27,8 @@ Image properties | Property | Description | Type | Default | Version | | -------- | ----------------------------------------------------------------------- | -------------------------------------------- | ------- | ------- | -| imageUrl | Link to image source | `string` | - | | -| imageAlt | Description of the image | `string` | - | | +| src | Link to image source | `string` | - | | +| alt | Description of the image | `string` | - | | | loading | Control if loading the image should be deferred when its off the screen | `eager` `lazy` | - | | | fit | Object-fit property of the image | `fill` `contain` `cover` `none` `scale-down` | `cover` | | @@ -39,40 +39,40 @@ Image properties ### Basic Image ```jsx live noInline -import { Image, CamaraTheme } from 'camara'; +import { Image, BrowserWindow } from 'camara'; render( - + woman in orange knit cap and blue jacket - + ); ``` ### Loading ```jsx live noInline -import { Flex, Image, CamaraTheme } from 'camara'; +import { Flex, Image, BrowserWindow } from 'camara'; render( - + woman in orange knit cap and blue jacket woman in orange knit cap and blue jacket - + ); ``` diff --git a/website/pages/docs/components/inputField.mdx b/website/pages/docs/components/inputField.mdx index 0f7e3c3..79d848d 100644 --- a/website/pages/docs/components/inputField.mdx +++ b/website/pages/docs/components/inputField.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/inputField/ --- -import { Box, Flex, InputField, CamaraTheme } from 'camara'; +import { Box, Flex, InputField, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -42,52 +42,52 @@ InputField properties ### Basic Input ```jsx live noInline -import { InputField, CamaraTheme } from 'camara'; +import { InputField, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Block ```jsx live noInline -import { Box, InputField, CamaraTheme } from 'camara'; +import { Box, InputField, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Inline ```jsx live noInline -import { Flex, InputField, CamaraTheme } from 'camara'; +import { Flex, InputField, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Helper Text ```jsx live noInline -import { Flex, InputField, CamaraTheme } from 'camara'; +import { Flex, InputField, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Required ```jsx live noInline -import { Flex, InputField, CamaraTheme } from 'camara'; +import { Flex, InputField, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Hidden Label ```jsx live noInline -import { Flex, InputField, CamaraTheme } from 'camara'; +import { Flex, InputField, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Disabled ```jsx live noInline -import { Flex, InputField, CamaraTheme } from 'camara'; +import { Flex, InputField, BrowserWindow } from 'camara'; render( - + - + ); ``` diff --git a/website/pages/docs/components/spacer.mdx b/website/pages/docs/components/spacer.mdx index 88c893d..c0287b7 100644 --- a/website/pages/docs/components/spacer.mdx +++ b/website/pages/docs/components/spacer.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/spacer/ --- -import { Box, Button, Spacer, CamaraTheme } from 'camara'; +import { Box, Button, Spacer, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -38,44 +38,44 @@ Spacer properties ### Top ```jsx live noInline -import { Box, Button, Spacer, CamaraTheme } from 'camara'; +import { Box, Button, Spacer, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Bottom ```jsx live noInline -import { Box, Button, Spacer, CamaraTheme } from 'camara'; +import { Box, Button, Spacer, BrowserWindow } from 'camara'; render( - + - + ); ``` ### Both ```jsx live noInline -import { Box, Button, Spacer, CamaraTheme } from 'camara'; +import { Box, Button, Spacer, BrowserWindow } from 'camara'; render( - + @@ -83,6 +83,6 @@ render( - + ); ``` diff --git a/website/pages/docs/components/tag.mdx b/website/pages/docs/components/tag.mdx index 049933e..aa7abe5 100644 --- a/website/pages/docs/components/tag.mdx +++ b/website/pages/docs/components/tag.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/tag/ --- -import { Box, Flex, Tag, CamaraTheme } from 'camara'; +import { Box, Flex, Tag, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -37,22 +37,22 @@ Tag properties ### Basic Tag ```jsx live noInline -import { Tag, CamaraTheme } from 'camara'; +import { Tag, BrowserWindow } from 'camara'; render( - + Tag - + ); ``` ### Example ```jsx live noInline -import { Flex, Tag, CamaraTheme } from 'camara'; +import { Flex, Tag, BrowserWindow } from 'camara'; render( - + red blue @@ -60,17 +60,17 @@ render( tomato teal - + ); ``` ### Size ```jsx live noInline -import { Box, Flex, Tag, CamaraTheme } from 'camara'; +import { Box, Flex, Tag, BrowserWindow } from 'camara'; render( - + {/* large */} @@ -129,6 +129,6 @@ render( - + ); ``` diff --git a/website/pages/docs/components/text.mdx b/website/pages/docs/components/text.mdx index 2b05f22..492be8c 100644 --- a/website/pages/docs/components/text.mdx +++ b/website/pages/docs/components/text.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/text/ --- -import { Box, Text, CamaraTheme } from 'camara'; +import { Box, Text, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -45,22 +45,22 @@ Text properties ### Basic Text ```jsx live noInline -import { Text, CamaraTheme } from 'camara'; +import { Text, BrowserWindow } from 'camara'; render( - + This is a text component - + ); ``` ### Variant ```jsx live noInline -import { Box, Text, CamaraTheme } from 'camara'; +import { Box, Text, BrowserWindow } from 'camara'; render( - + Live Text translation Live Text translation @@ -78,17 +78,17 @@ render( ライブテキスト翻訳 Raibu tekisuto hon'yaku ライブテキスト翻訳 Raibu tekisuto hon'yaku - + ); ``` ### Weight ```jsx live noInline -import { Box, Text, CamaraTheme } from 'camara'; +import { Box, Text, BrowserWindow } from 'camara'; render( - + There is so much rich information in your photos, from memorable places @@ -126,17 +126,17 @@ render( o saigen suru no ni yakudachimasu. - + ); ``` ### Italic ```jsx live noInline -import { Box, Text, CamaraTheme } from 'camara'; +import { Box, Text, BrowserWindow } from 'camara'; render( - + There is so much rich information in your photos, from memorable places @@ -155,17 +155,17 @@ render( o saigen suru no ni yakudachimasu. - + ); ``` ### Inline ```jsx live noInline -import { Text, CamaraTheme } from 'camara'; +import { Text, BrowserWindow } from 'camara'; render( - + There is so much rich information in your photos, from memorable places you’ve visited to handwritten family recipes. iOS 15 uses secure on-device @@ -176,17 +176,17 @@ render( すべての神々、すべての天、すべての地獄はあなたの中にあります Subete no kami 々, Subete no ten, subete no jigoku wa anata no naka ni arimasu - + ); ``` ### Align ```jsx live noInline -import { Box, Text, CamaraTheme } from 'camara'; +import { Box, Text, BrowserWindow } from 'camara'; render( - + There is so much rich information in your photos, from memorable places @@ -256,17 +256,17 @@ render( o saigen suru no ni yakudachimasu. - + ); ``` ### Underline ```jsx live noInline -import { Box, Text, CamaraTheme } from 'camara'; +import { Box, Text, BrowserWindow } from 'camara'; render( - + There is so much rich information in your photos, from memorable places @@ -285,17 +285,17 @@ render( o saigen suru no ni yakudachimasu. - + ); ``` ### Size ```jsx live noInline -import { Box, Text, CamaraTheme } from 'camara'; +import { Box, Text, BrowserWindow } from 'camara'; render( - + There is so much rich information in your photos, from memorable places @@ -349,17 +349,17 @@ render( o saigen suru no ni yakudachimasu. - + ); ``` ### Strike ```jsx live noInline -import { Box, Text, CamaraTheme } from 'camara'; +import { Box, Text, BrowserWindow } from 'camara'; render( - + There is so much rich information in your photos, from memorable places @@ -378,6 +378,6 @@ render( o saigen suru no ni yakudachimasu. - + ); ``` diff --git a/website/pages/docs/components/textarea.mdx b/website/pages/docs/components/textarea.mdx index d224a59..03ac7ea 100644 --- a/website/pages/docs/components/textarea.mdx +++ b/website/pages/docs/components/textarea.mdx @@ -4,14 +4,14 @@ section: Components slug: /docs/components/textarea/ --- -import { Flex, TextArea, CamaraTheme } from 'camara'; +import { Flex, TextArea, BrowserWindow } from 'camara'; import { LiveConfig } from 'smooth-doc/components'; @@ -45,22 +45,22 @@ TextArea properties ### Basic TextArea ```jsx live noInline -import { TextArea, CamaraTheme } from 'camara'; +import { TextArea, BrowserWindow } from 'camara'; render( - +