├── src ├── layouts │ ├── index.ts │ └── home │ │ ├── home.layout.tsx │ │ └── home.layout.styles.ts ├── components │ ├── box │ │ ├── box.styles.ts │ │ └── Box.tsx │ ├── flex │ │ ├── flex.styles.ts │ │ └── Flex.tsx │ ├── logo │ │ ├── logo.styles.ts │ │ ├── logo.stories.tsx │ │ └── Logo.tsx │ ├── sphere │ │ ├── sphere.styles.ts │ │ ├── Sphere.tsx │ │ └── sphere.stories.tsx │ ├── container │ │ ├── Container.tsx │ │ ├── container.styles.ts │ │ └── container.stories.tsx │ ├── toggle │ │ ├── Toggle.tsx │ │ ├── toggle.styles.ts │ │ └── toggle.stories.tsx │ ├── index.ts │ ├── header │ │ ├── header.stories.tsx │ │ ├── header.styles.ts │ │ └── Header.tsx │ ├── avatar │ │ ├── Avatar.tsx │ │ ├── avatar.styles.ts │ │ └── avatar.stories.tsx │ └── button │ │ ├── Button.tsx │ │ ├── button.stories.tsx │ │ └── button.styles.ts ├── pages │ ├── index.tsx │ ├── _app.tsx │ └── _document.tsx └── styles │ ├── tokens │ ├── transitions.ts │ ├── opacities.ts │ ├── sizes.ts │ ├── z-indices.ts │ ├── utils.ts │ ├── spacings.ts │ ├── borders.ts │ ├── medias.ts │ ├── shadows.ts │ ├── index.ts │ ├── fonts.ts │ └── colors.ts │ ├── index.ts │ ├── global │ └── global-styles.ts │ └── stitches.config.ts ├── .lintstagedrc ├── generators ├── templates │ ├── injectable-component-index.ts.hbs │ ├── component-styles.ts.hbs │ ├── component.tsx.hbs │ └── component-stories.tsx.hbs └── plopfile.js ├── commitlint.config.js ├── .husky ├── pre-commit └── commit-msg ├── public ├── favicon.ico └── assets │ └── images │ ├── storybook.png │ ├── stitches-logo.png │ └── stitches-template-cover.png ├── .prettierrc ├── next.config.js ├── .vscode ├── settings.json └── extensions.json ├── .storybook ├── preview-head.html ├── main.js └── preview.js ├── .gitignore ├── tsconfig.json ├── .eslintrc ├── package.json └── README.md /src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export { HomeLayout } from './home/home.layout'; 2 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "src/**/*": [ 3 | "yarn lint --fix" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /generators/templates/injectable-component-index.ts.hbs: -------------------------------------------------------------------------------- 1 | /* PLOP_INJECT_COMPONENT_EXPORT */ -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install lint-staged 5 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit "$1" 5 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diegosilvadigital/awesome-template-stitches/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "singleQuote": true, 5 | "trailingComma": "none" 6 | } 7 | -------------------------------------------------------------------------------- /src/components/box/box.styles.ts: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles/stitches.config'; 2 | 3 | export const Box = styled('div', {}); 4 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { HomeLayout } from 'layouts'; 2 | 3 | export default function Home() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /public/assets/images/storybook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diegosilvadigital/awesome-template-stitches/HEAD/public/assets/images/storybook.png -------------------------------------------------------------------------------- /src/styles/tokens/transitions.ts: -------------------------------------------------------------------------------- 1 | const transitions = { 2 | default: '.3s ease', 3 | fast: '.1s ease' 4 | }; 5 | 6 | export { transitions }; 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true 4 | }; 5 | 6 | module.exports = nextConfig; 7 | -------------------------------------------------------------------------------- /public/assets/images/stitches-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diegosilvadigital/awesome-template-stitches/HEAD/public/assets/images/stitches-logo.png -------------------------------------------------------------------------------- /src/styles/tokens/opacities.ts: -------------------------------------------------------------------------------- 1 | const opacities = { 2 | transparent: 0, 3 | translucent: 0.5, 4 | opaque: 1 5 | }; 6 | 7 | export { opacities }; 8 | -------------------------------------------------------------------------------- /src/components/flex/flex.styles.ts: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles/stitches.config'; 2 | 3 | export const Flex = styled('div', { 4 | display: 'flex' 5 | }); 6 | -------------------------------------------------------------------------------- /src/styles/index.ts: -------------------------------------------------------------------------------- 1 | import { globalStyles } from './global/global-styles'; 2 | 3 | import * as tokens from './tokens'; 4 | 5 | export { globalStyles, tokens }; 6 | -------------------------------------------------------------------------------- /public/assets/images/stitches-template-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diegosilvadigital/awesome-template-stitches/HEAD/public/assets/images/stitches-template-cover.png -------------------------------------------------------------------------------- /generators/templates/component-styles.ts.hbs: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles/stitches.config'; 2 | 3 | export const Wrapper = styled('div', { 4 | border: '2px solid red' 5 | }); 6 | -------------------------------------------------------------------------------- /src/components/logo/logo.styles.ts: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles/stitches.config'; 2 | 3 | export const Wrapper = styled('div', { 4 | color: '$text-contrast-high', 5 | display: 'flex' 6 | }); 7 | -------------------------------------------------------------------------------- /src/styles/tokens/sizes.ts: -------------------------------------------------------------------------------- 1 | const sizes = { 2 | 'container-sm': '450px', 3 | 'container-md': '768px', 4 | 'container-lg': '1170px', 5 | 'container-xl': '1440px' 6 | }; 7 | 8 | export { sizes }; 9 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": false, 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true 5 | }, 6 | "editor.defaultFormatter": "esbenp.prettier-vscode", 7 | } 8 | -------------------------------------------------------------------------------- /src/styles/tokens/z-indices.ts: -------------------------------------------------------------------------------- 1 | const zIndices = { 2 | behind: -1, 3 | root: 0, 4 | base: 10, 5 | menu: 20, 6 | overlay: 30, 7 | modal: 40, 8 | 'always-on-top': 50 9 | }; 10 | 11 | export { zIndices }; 12 | -------------------------------------------------------------------------------- /src/styles/tokens/utils.ts: -------------------------------------------------------------------------------- 1 | const utils = { 2 | mx: (value: string) => ({ 3 | marginLeft: value, 4 | marginRight: value 5 | }), 6 | px: (value: string) => ({ 7 | paddingLeft: value, 8 | paddingRight: value 9 | }) 10 | }; 11 | 12 | export { utils }; 13 | -------------------------------------------------------------------------------- /src/components/sphere/sphere.styles.ts: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles/stitches.config'; 2 | 3 | export const Sphere = styled('div', { 4 | position: 'fixed', 5 | zIndex: '$behind', 6 | borderRadius: '$circular', 7 | backgroundColor: '$primary-03', 8 | filter: 'blur(60px)' 9 | }); 10 | -------------------------------------------------------------------------------- /generators/templates/component.tsx.hbs: -------------------------------------------------------------------------------- 1 | import * as s from './{{kebabCase name}}.styles'; 2 | 3 | export type {{pascalCase name}}Props = any; 4 | 5 | const {{pascalCase name}} = () => ( 6 | 7 |

{{kebabCase name}}

8 | 9 | ); 10 | 11 | export { {{pascalCase name}} }; 12 | -------------------------------------------------------------------------------- /src/components/container/Container.tsx: -------------------------------------------------------------------------------- 1 | import * as s from './container.styles'; 2 | 3 | export type ContainerProps = { 4 | children?: React.ReactNode; 5 | }; 6 | 7 | const Container = ({ children }: ContainerProps) => ( 8 | {children} 9 | ); 10 | 11 | export { Container }; 12 | -------------------------------------------------------------------------------- /src/styles/tokens/spacings.ts: -------------------------------------------------------------------------------- 1 | const spacings = { 2 | xs: '0.25rem', // 4px 3 | sm: '0.5rem', // 8px 4 | md: '0.75rem', // 12px 5 | lg: '1rem', // 16px 6 | xl: '1.25rem', // 20px 7 | xx: '1.5rem', // 24px 8 | '2x': '2rem', // 32px 9 | '3x': '3rem' // 48px 10 | }; 11 | 12 | export { spacings }; 13 | -------------------------------------------------------------------------------- /src/styles/tokens/borders.ts: -------------------------------------------------------------------------------- 1 | const radius = { 2 | xs: '0.25rem', // 4px 3 | sm: '0.5rem', // 8px 4 | md: '0.75rem', // 12px 5 | lg: '1rem', // 16px 6 | xl: '2rem', // 32px 7 | pill: '50rem', // 800px 8 | circular: '100rem' // 1600px 9 | }; 10 | 11 | const borders = { 12 | radius 13 | }; 14 | 15 | export { borders }; 16 | -------------------------------------------------------------------------------- /src/components/toggle/Toggle.tsx: -------------------------------------------------------------------------------- 1 | import * as s from './toggle.styles'; 2 | 3 | export type ToggleProps = { 4 | children: React.ReactNode; 5 | onClick?: () => void; 6 | }; 7 | 8 | const Toggle = ({ children, onClick }: ToggleProps) => ( 9 | {children} 10 | ); 11 | 12 | export { Toggle }; 13 | -------------------------------------------------------------------------------- /src/components/box/Box.tsx: -------------------------------------------------------------------------------- 1 | import * as s from './box.styles'; 2 | import { StichesConfigProps } from 'styles/stitches.config'; 3 | 4 | export type BoxProps = { 5 | children: React.ReactNode; 6 | css?: StichesConfigProps; 7 | }; 8 | 9 | const Box = ({ children, css }: BoxProps) => ( 10 | {children} 11 | ); 12 | 13 | export { Box }; 14 | -------------------------------------------------------------------------------- /src/components/flex/Flex.tsx: -------------------------------------------------------------------------------- 1 | import * as s from './flex.styles'; 2 | import { StichesConfigProps } from 'styles/stitches.config'; 3 | 4 | export type FlexProps = { 5 | children: React.ReactNode; 6 | css?: StichesConfigProps; 7 | }; 8 | 9 | const Flex = ({ children, css }: FlexProps) => ( 10 | {children} 11 | ); 12 | 13 | export { Flex }; 14 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 10 | -------------------------------------------------------------------------------- /src/styles/tokens/medias.ts: -------------------------------------------------------------------------------- 1 | const medias = { 2 | 'greater-sm': '(min-width: 450px)', 3 | 'greater-md': '(min-width: 768px)', 4 | 'greater-lg': '(min-width: 1170px)', 5 | 'greater-xl': '(min-width: 1440px)', 6 | 'less-sm': '(max-width: 450px)', 7 | 'less-md': '(max-width: 768px)', 8 | 'less-lg': '(max-width: 1170px)', 9 | 'less-xl': '(max-width: 1440px)' 10 | }; 11 | 12 | export { medias }; 13 | -------------------------------------------------------------------------------- /src/styles/tokens/shadows.ts: -------------------------------------------------------------------------------- 1 | import { colors } from './colors'; 2 | 3 | const shadows = { 4 | dark: { 5 | normal: `0 2px 10px ${colors.dark['primary-03']}`, 6 | focus: `0 0 0 2px ${colors.dark['primary-09']}` 7 | }, 8 | light: { 9 | normal: `0 2px 10px ${colors.light['primary-03']}`, 10 | focus: `0 0 0 2px ${colors.light['primary-09']}` 11 | } 12 | }; 13 | 14 | export { shadows }; 15 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "eamodio.gitlens", 5 | "esbenp.prettier-vscode", 6 | "mhutchie.git-graph", 7 | "mikestead.dotenv", 8 | "mkxml.vscode-filesize", 9 | "naumovs.color-highlight", 10 | "PKief.material-icon-theme", 11 | "wix.vscode-import-cost", 12 | "wmaurer.change-case", 13 | "yzhang.markdown-all-in-one" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | /* PLOP_INJECT_COMPONENT_EXPORT */ 2 | export { Avatar } from './avatar/Avatar'; 3 | export { Box } from './box/Box'; 4 | export { Button } from './button/Button'; 5 | export { Container } from './container/Container'; 6 | export { Flex } from './flex/Flex'; 7 | export { Header } from './header/Header'; 8 | export { Logo } from './logo/Logo'; 9 | export { Sphere } from './sphere/Sphere'; 10 | export { Toggle } from './toggle/Toggle'; 11 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../src/components/**/*.stories.tsx'], 3 | addons: [ 4 | '@storybook/addon-links', 5 | '@storybook/addon-essentials', 6 | '@storybook/addon-interactions', 7 | 'multiple-themes-stitches', 8 | 'storybook-addon-next', 9 | '@storybook/addon-a11y', 10 | 'storybook-addon-pseudo-states', 11 | ], 12 | framework: '@storybook/react', 13 | core: { 14 | builder: '@storybook/builder-webpack5' 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/header/header.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Story, Meta } from '@storybook/react/types-6-0'; 2 | 3 | import { Header, HeaderProps } from './Header'; 4 | 5 | const story: Meta = { 6 | title: 'Molecules/Header', 7 | component: Header, 8 | args: {}, 9 | argTypes: {}, 10 | parameters: { controls: { disable: true }, layout: 'fullscreen' } 11 | }; 12 | 13 | export const HeaderExample: Story = args =>
; 14 | 15 | export default story; 16 | -------------------------------------------------------------------------------- /src/components/container/container.styles.ts: -------------------------------------------------------------------------------- 1 | import { styled } from 'styles/stitches.config'; 2 | 3 | export const Container = styled('div', { 4 | width: '100%', 5 | mx: 'auto', 6 | '@less-sm': { maxWidth: '$container-sm', px: '$sm' }, 7 | '@greater-sm': { maxWidth: '$container-md', px: '$md' }, 8 | '@greater-md': { maxWidth: '$container-lg', px: '$lg' }, 9 | '@greater-lg': { maxWidth: '$container-xl', px: '$xl' }, 10 | '@greater-xl': { minWidth: '$container-xl', px: '$xx' } 11 | }); 12 | -------------------------------------------------------------------------------- /src/components/header/header.styles.ts: -------------------------------------------------------------------------------- 1 | import { Container } from 'components/container/container.styles'; 2 | import { styled } from 'styles/stitches.config'; 3 | 4 | export const Header = styled('header', { 5 | height: 75, 6 | position: 'fixed', 7 | top: 0, 8 | width: '100%', 9 | display: 'flex', 10 | alignItems: 'center' 11 | }); 12 | 13 | export const HeaderContainer = styled(Container, { 14 | display: 'flex', 15 | alignItems: 'center', 16 | justifyContent: 'space-between' 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/avatar/Avatar.tsx: -------------------------------------------------------------------------------- 1 | import * as s from './avatar.styles'; 2 | 3 | export type AvatarProps = { 4 | src: string; 5 | alt: string; 6 | fallbackContent: string; 7 | fallbackDelay?: number; 8 | }; 9 | 10 | const Avatar = ({ 11 | alt, 12 | fallbackContent, 13 | fallbackDelay = 600, 14 | src 15 | }: AvatarProps) => ( 16 | 17 | 18 | {fallbackContent} 19 | 20 | ); 21 | 22 | export { Avatar }; 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /src/components/logo/logo.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Story, Meta } from '@storybook/react/types-6-0'; 2 | 3 | import { Logo, LogoProps } from './Logo'; 4 | 5 | const story: Meta = { 6 | title: 'Atoms/Logo', 7 | component: Logo, 8 | args: { 9 | size: 24, 10 | color: '$primary-09' 11 | }, 12 | argTypes: { 13 | size: { description: 'Logo size' }, 14 | color: { description: 'Logo color' } 15 | }, 16 | parameters: {} 17 | }; 18 | 19 | export const LogoExample: Story = args => ; 20 | 21 | export default story; 22 | -------------------------------------------------------------------------------- /generators/templates/component-stories.tsx.hbs: -------------------------------------------------------------------------------- 1 | import { Story, Meta } from '@storybook/react/types-6-0'; 2 | 3 | import { {{pascalCase name}}, {{pascalCase name}}Props } from './{{pascalCase name}}'; 4 | 5 | const story: Meta<{{pascalCase name}}Props> = { 6 | title: 'Generated/{{pascalCase name}}', 7 | component: {{pascalCase name}}, 8 | args: {}, 9 | argTypes: {}, 10 | parameters: {} 11 | }; 12 | 13 | export const {{pascalCase name}}Example: Story<{{pascalCase name}}Props> = args => ( 14 | <{{pascalCase name}} {...args} /> 15 | ); 16 | 17 | export default story; 18 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import { ThemeProvider } from 'next-themes'; 2 | import type { AppProps } from 'next/app'; 3 | 4 | import { globalStyles } from 'styles'; 5 | import { theme } from 'styles/stitches.config'; 6 | 7 | export default function App({ Component, pageProps }: AppProps) { 8 | globalStyles(); 9 | return ( 10 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "target": "es5", 5 | "lib": ["dom", "dom.iterable", "esnext"], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "preserve", 17 | "incremental": true 18 | }, 19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /src/styles/global/global-styles.ts: -------------------------------------------------------------------------------- 1 | import { globalCss } from '../stitches.config'; 2 | 3 | export const globalStyles = globalCss({ 4 | '*': { 5 | margin: 0, 6 | padding: 0, 7 | boxSizing: 'border-box' 8 | }, 9 | 'html, body': { 10 | fontFamily: '$body', 11 | WebkitFontSmoothing: 'antialiased', 12 | '&::-webkit-scrollbar': { 13 | backgroundColor: 'transparent', 14 | width: 4 15 | }, 16 | '&::-webkit-scrollbar-track': { 17 | backgroundColor: 'transparent' 18 | }, 19 | '&::-webkit-scrollbar-thumb': { 20 | backgroundColor: '$brand-primary-09' 21 | } 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /src/styles/tokens/index.ts: -------------------------------------------------------------------------------- 1 | import { borders } from './borders'; 2 | import { colors } from './colors'; 3 | import { fonts } from './fonts'; 4 | import { medias } from './medias'; 5 | import { opacities } from './opacities'; 6 | import { shadows } from './shadows'; 7 | import { sizes } from './sizes'; 8 | import { spacings } from './spacings'; 9 | import { transitions } from './transitions'; 10 | import { utils } from './utils'; 11 | import { zIndices } from './z-indices'; 12 | 13 | export { 14 | borders, 15 | colors, 16 | fonts, 17 | medias, 18 | opacities, 19 | sizes, 20 | shadows, 21 | spacings, 22 | transitions, 23 | utils, 24 | zIndices 25 | }; 26 | -------------------------------------------------------------------------------- /src/components/toggle/toggle.styles.ts: -------------------------------------------------------------------------------- 1 | import * as RadixToggle from '@radix-ui/react-toggle'; 2 | 3 | import { styled } from 'styles/stitches.config'; 4 | 5 | export const Toggle = styled(RadixToggle.Root, { 6 | all: 'unset', 7 | backgroundColor: 'transparent', 8 | color: '$text-contrast-high', 9 | height: 35, 10 | width: 35, 11 | borderRadius: '$xs', 12 | display: 'flex', 13 | fontSize: '$sm', 14 | lineHeight: '$100', 15 | alignItems: 'center', 16 | justifyContent: 'center', 17 | '&:hover': { backgroundColor: '$primary-03' }, 18 | '&[data-state=on]': { 19 | color: '$text-contrast-high' 20 | }, 21 | '&:focus': { boxShadow: '$focus' } 22 | }); 23 | -------------------------------------------------------------------------------- /src/components/sphere/Sphere.tsx: -------------------------------------------------------------------------------- 1 | import * as s from './sphere.styles'; 2 | import { ColorTokensTypes } from 'styles/stitches.config'; 3 | 4 | export type SphereProps = { 5 | size: number; 6 | top?: number; 7 | bottom?: number; 8 | left?: number; 9 | right?: number; 10 | color?: ColorTokensTypes; 11 | }; 12 | 13 | const Sphere = ({ 14 | size, 15 | color = '$primary-03', 16 | left, 17 | top, 18 | bottom, 19 | right 20 | }: SphereProps) => ( 21 | 32 | ); 33 | 34 | export { Sphere }; 35 | -------------------------------------------------------------------------------- /src/components/button/Button.tsx: -------------------------------------------------------------------------------- 1 | import * as s from './button.styles'; 2 | 3 | export type ButtonProps = { 4 | children: React.ReactNode; 5 | variant?: 'primary' | 'secondary'; 6 | type?: 'button' | 'submit' | 'reset'; 7 | isFullWidth?: boolean; 8 | onClick?: () => void; 9 | }; 10 | 11 | const Button = ({ 12 | children, 13 | variant = 'primary', 14 | type = 'button', 15 | isFullWidth = false, 16 | onClick 17 | }: ButtonProps) => { 18 | return ( 19 | 25 | {children} 26 | 27 | ); 28 | }; 29 | 30 | export { Button }; 31 | -------------------------------------------------------------------------------- /src/components/toggle/toggle.stories.tsx: -------------------------------------------------------------------------------- 1 | import { SunIcon } from '@radix-ui/react-icons'; 2 | import { Story, Meta } from '@storybook/react/types-6-0'; 3 | 4 | import { Toggle, ToggleProps } from './Toggle'; 5 | 6 | const story: Meta = { 7 | title: 'Atoms/Toggle', 8 | component: Toggle, 9 | args: { 10 | children: 11 | }, 12 | argTypes: { 13 | children: { description: 'Toggle content' }, 14 | onClick: { 15 | description: 'Event executed when the toggle is clicked', 16 | action: 'toggle-clicked' 17 | } 18 | }, 19 | parameters: {} 20 | }; 21 | 22 | export const ToggleExample: Story = args => ; 23 | 24 | export default story; 25 | -------------------------------------------------------------------------------- /src/components/sphere/sphere.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Story, Meta } from '@storybook/react/types-6-0'; 2 | 3 | import { Sphere, SphereProps } from './Sphere'; 4 | 5 | const story: Meta = { 6 | title: 'Atoms/Sphere', 7 | component: Sphere, 8 | args: { 9 | size: 320, 10 | top: 0, 11 | left: -20, 12 | color: '$primary-03' 13 | }, 14 | argTypes: { 15 | size: { description: 'Sphere size (width and height)' }, 16 | top: { description: 'Distance from top' }, 17 | left: { description: 'Distance from left' }, 18 | bottom: { description: 'Distance from bottom' }, 19 | right: { description: 'Distance from right' }, 20 | color: { description: 'Sphere color' } 21 | }, 22 | parameters: {} 23 | }; 24 | 25 | export const SphereExample: Story = args => ; 26 | 27 | export default story; 28 | -------------------------------------------------------------------------------- /src/components/container/container.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Story, Meta } from '@storybook/react/types-6-0'; 2 | 3 | import { Container, ContainerProps } from './Container'; 4 | 5 | const story: Meta = { 6 | title: 'Helpers/Container', 7 | component: Container, 8 | args: { children: 'Responsive content' }, 9 | argTypes: { children: { description: 'Container content' } } 10 | }; 11 | 12 | export const ContainerExample: Story = args => ( 13 |
20 | 21 |

28 | {args.children} 29 |

30 | 31 |
32 | ); 33 | 34 | export default story; 35 | -------------------------------------------------------------------------------- /src/components/header/Header.tsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from 'next-themes'; 2 | import { useState } from 'react'; 3 | 4 | import { SunIcon, MoonIcon } from '@radix-ui/react-icons'; 5 | import { Toggle, Logo } from 'components'; 6 | 7 | import * as s from './header.styles'; 8 | 9 | export type HeaderProps = any; 10 | 11 | const Header = () => { 12 | const { theme, setTheme } = useTheme(); 13 | const [isDarkTheme, setIsDarkTheme] = useState(theme === 'dark'); 14 | 15 | const toggleTheme = () => { 16 | setIsDarkTheme(!isDarkTheme); 17 | isDarkTheme ? setTheme('light') : setTheme('dark'); 18 | }; 19 | 20 | const ThemeIcon = () => (theme === 'light' ? : ); 21 | 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | }; 33 | 34 | export { Header }; 35 | -------------------------------------------------------------------------------- /src/components/avatar/avatar.styles.ts: -------------------------------------------------------------------------------- 1 | import * as RadixAvatar from '@radix-ui/react-avatar'; 2 | 3 | import { styled } from 'styles/stitches.config'; 4 | 5 | export const Avatar = styled(RadixAvatar.Root, { 6 | display: 'inline-flex', 7 | alignItems: 'center', 8 | justifyContent: 'center', 9 | verticalAlign: 'middle', 10 | overflow: 'hidden', 11 | userSelect: 'none', 12 | width: 45, 13 | height: 45, 14 | borderRadius: '100%', 15 | backgroundColor: '$black-03' 16 | }); 17 | 18 | export const Image = styled(RadixAvatar.Image, { 19 | width: '100%', 20 | height: '100%', 21 | objectFit: 'cover', 22 | borderRadius: 'inherit' 23 | }); 24 | 25 | export const Fallback = styled(RadixAvatar.Fallback, { 26 | width: '100%', 27 | height: '100%', 28 | display: 'flex', 29 | alignItems: 'center', 30 | justifyContent: 'center', 31 | backgroundColor: '$primary-03', 32 | color: '$primary-11', 33 | fontSize: '$sm', 34 | lineHeight: '$100', 35 | fontWeight: '$500' 36 | }); 37 | -------------------------------------------------------------------------------- /src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Head, Html, Main, NextScript } from 'next/document'; 2 | 3 | import { getCssText } from 'styles/stitches.config'; 4 | 5 | export default function MyDocument() { 6 | return ( 7 | 8 | 9 |