├── template ├── packages │ ├── docs │ │ ├── .gitignore │ │ ├── .eslintrc.json │ │ ├── tsconfig.json │ │ ├── .storybook │ │ │ ├── manager.js │ │ │ ├── preview-head.html │ │ │ ├── preview.js │ │ │ └── main.js │ │ ├── src │ │ │ ├── pages │ │ │ │ ├── home.stories.mdx │ │ │ │ └── tokens │ │ │ │ │ ├── colors.stories.mdx │ │ │ │ │ ├── radii.stories.mdx │ │ │ │ │ ├── space.stories.mdx │ │ │ │ │ ├── fonts.stories.mdx │ │ │ │ │ ├── font-weights.stories.mdx │ │ │ │ │ ├── line-heights.stories.mdx │ │ │ │ │ └── font-sizes.stories.mdx │ │ │ ├── stories │ │ │ │ ├── Box.stories.tsx │ │ │ │ ├── Checkbox.stories.tsx │ │ │ │ ├── Avatar.stories.tsx │ │ │ │ ├── MultiStep.stories.tsx │ │ │ │ ├── TextArea.stories.tsx │ │ │ │ ├── Heading.stories.tsx │ │ │ │ ├── TextInput.stories.tsx │ │ │ │ ├── Text.stories.tsx │ │ │ │ └── Button.stories.tsx │ │ │ ├── styles │ │ │ │ └── tokens-grid.css │ │ │ └── components │ │ │ │ ├── ColorsGrid.tsx │ │ │ │ └── TokensGrid.tsx │ │ ├── vite.config.js │ │ └── package.json │ ├── react │ │ ├── .eslintrc.json │ │ ├── tsconfig.json │ │ ├── src │ │ │ ├── index.tsx │ │ │ ├── components │ │ │ │ ├── Box.tsx │ │ │ │ ├── Avatar │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.ts │ │ │ │ ├── Checkbox │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.ts │ │ │ │ ├── TextInput │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.ts │ │ │ │ ├── MultiStep │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.ts │ │ │ │ ├── Heading.tsx │ │ │ │ ├── TextArea.tsx │ │ │ │ ├── Text.tsx │ │ │ │ └── Button.tsx │ │ │ └── styles │ │ │ │ └── index.ts │ │ └── package.json │ ├── tokens │ │ ├── .eslintrc.json │ │ ├── tsconfig.json │ │ ├── src │ │ │ ├── fonts.ts │ │ │ ├── font-weights.ts │ │ │ ├── line-heights.ts │ │ │ ├── radii.ts │ │ │ ├── index.ts │ │ │ ├── space.ts │ │ │ ├── font-sizes.ts │ │ │ └── colors.ts │ │ └── package.json │ ├── eslint-config │ │ ├── index.js │ │ └── package.json │ └── ts-config │ │ ├── package.json │ │ ├── react.json │ │ └── base.json ├── gitignore ├── README.md ├── turbo.json ├── .changeset │ ├── config.json │ └── README.md ├── package.json └── .github │ └── workflows │ ├── release.yml │ └── deploy-docs.yml ├── .gitignore ├── image.png ├── image-1.png ├── image-2.png ├── image-3.png ├── image-4.png ├── package.json ├── cli.js └── README.md /template/packages/docs/.gitignore: -------------------------------------------------------------------------------- 1 | storybook-static -------------------------------------------------------------------------------- /template/gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .turbo 4 | 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | storybook-static 4 | dist 5 | .turbo -------------------------------------------------------------------------------- /image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedroaraujo20/create-design-system/HEAD/image.png -------------------------------------------------------------------------------- /image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedroaraujo20/create-design-system/HEAD/image-1.png -------------------------------------------------------------------------------- /image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedroaraujo20/create-design-system/HEAD/image-2.png -------------------------------------------------------------------------------- /image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedroaraujo20/create-design-system/HEAD/image-3.png -------------------------------------------------------------------------------- /image-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedroaraujo20/create-design-system/HEAD/image-4.png -------------------------------------------------------------------------------- /template/packages/docs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@brightpack/eslint-config" 3 | } -------------------------------------------------------------------------------- /template/packages/react/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@brightpack/eslint-config" 3 | } 4 | -------------------------------------------------------------------------------- /template/packages/tokens/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@brightpack/eslint-config" 3 | } 4 | -------------------------------------------------------------------------------- /template/packages/eslint-config/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["@rocketseat/eslint-config/react"], 3 | }; 4 | -------------------------------------------------------------------------------- /template/packages/docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@brightpack/ts-config/react.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /template/packages/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@brightpack/ts-config/react.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /template/packages/tokens/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@brightpack/ts-config/base.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create Design System](https://github.com/pedroaraujo20/create-design-system). -------------------------------------------------------------------------------- /template/packages/tokens/src/fonts.ts: -------------------------------------------------------------------------------- 1 | export const fonts = { 2 | default: 'Roboto, sans-serif', 3 | code: 'monospace', 4 | } 5 | -------------------------------------------------------------------------------- /template/packages/tokens/src/font-weights.ts: -------------------------------------------------------------------------------- 1 | export const fontWeights = { 2 | regular: '400', 3 | medium: '500', 4 | bold: '700', 5 | } 6 | -------------------------------------------------------------------------------- /template/packages/ts-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@brightpack/ts-config", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true 6 | } 7 | -------------------------------------------------------------------------------- /template/packages/tokens/src/line-heights.ts: -------------------------------------------------------------------------------- 1 | export const lineHeights = { 2 | shorter: '125%', 3 | short: '140%', 4 | base: '160%', 5 | tall: '180%', 6 | } 7 | -------------------------------------------------------------------------------- /template/packages/tokens/src/radii.ts: -------------------------------------------------------------------------------- 1 | export const radii = { 2 | px: '1px', 3 | xs: '4px', 4 | sm: '6px', 5 | md: '8px', 6 | lg: '16px', 7 | full: '99999px', 8 | } 9 | -------------------------------------------------------------------------------- /template/packages/docs/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/addons' 2 | import { themes } from '@storybook/theming' 3 | 4 | addons.setConfig({ 5 | theme: themes.dark 6 | }) -------------------------------------------------------------------------------- /template/packages/docs/src/pages/home.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | 3 | 4 | 5 | # Create Design System 6 | 7 | Create Design System. 8 | 9 | -------------------------------------------------------------------------------- /template/packages/docs/vite.config.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import react from '@vitejs/plugin-react' 4 | import { defineConfig } from 'vite' 5 | 6 | export default defineConfig({ 7 | plugins: [react()], 8 | }) 9 | -------------------------------------------------------------------------------- /template/packages/ts-config/react.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./base.json", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "lib": ["dom", "ES2015"], 6 | "module": "ESNext", 7 | "target": "es6" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /template/packages/tokens/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './colors' 2 | export * from './space' 3 | export * from './radii' 4 | export * from './fonts' 5 | export * from './font-sizes' 6 | export * from './font-weights' 7 | export * from './line-heights' 8 | -------------------------------------------------------------------------------- /template/packages/docs/src/pages/tokens/colors.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import { ColorsGrid } from '../../components/ColorsGrid' 3 | 4 | 5 | 6 | # Colors 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /template/packages/eslint-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@brightpack/eslint-config", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "main": "index.js", 7 | "devDependencies": { 8 | "@rocketseat/eslint-config": "^1.2.0", 9 | "eslint": "^8.42.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /template/packages/docs/src/pages/tokens/radii.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import { TokensGrid } from '../../components/TokensGrid' 3 | import { radii } from '@brightpack/tokens' 4 | 5 | 6 | 7 | # Radii 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /template/packages/docs/src/pages/tokens/space.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import { TokensGrid } from '../../components/TokensGrid' 3 | import { space } from '@brightpack/tokens' 4 | 5 | 6 | 7 | # Space 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /template/packages/docs/src/pages/tokens/fonts.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import { TokensGrid } from '../../components/TokensGrid' 3 | import { fonts } from '@brightpack/tokens' 4 | 5 | 6 | 7 | # Font Families 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /template/packages/docs/src/pages/tokens/font-weights.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import { TokensGrid } from '../../components/TokensGrid' 3 | import { fontWeights } from '@brightpack/tokens' 4 | 5 | 6 | 7 | # Font Weights 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /template/packages/docs/src/pages/tokens/line-heights.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import { TokensGrid } from '../../components/TokensGrid' 3 | import { lineHeights } from '@brightpack/tokens' 4 | 5 | 6 | 7 | # Line Heights 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /template/turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turborepo.org/schema.json", 3 | "pipeline": { 4 | "dev": { 5 | "cache": false 6 | }, 7 | "build": { 8 | "outputs": [ 9 | "dist/**", 10 | "storybook-static/**" 11 | ], 12 | "dependsOn": [ 13 | "^build" 14 | ] 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /template/packages/docs/src/pages/tokens/font-sizes.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs' 2 | import { TokensGrid } from '../../components/TokensGrid' 3 | import { fontSizes } from '@brightpack/tokens' 4 | 5 | 6 | 7 | # Font Sizes 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /template/packages/docs/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /template/packages/tokens/src/space.ts: -------------------------------------------------------------------------------- 1 | export const space = { 2 | 1: '0.25rem', 3 | 2: '0.5rem', 4 | 3: '0.75rem', 5 | 4: '1rem', 6 | 5: '1.25rem', 7 | 6: '1.5rem', 8 | 7: '1.75rem', 9 | 8: '2rem', 10 | 10: '2.5rem', 11 | 12: '3rem', 12 | 16: '4rem', 13 | 20: '5rem', 14 | 40: '10rem', 15 | 64: '16rem', 16 | 80: '20rem', 17 | } 18 | -------------------------------------------------------------------------------- /template/.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "master", 9 | "updateInternalDependencies": "patch", 10 | "ignore": ["@brightpack/docs"] 11 | } 12 | -------------------------------------------------------------------------------- /template/packages/tokens/src/font-sizes.ts: -------------------------------------------------------------------------------- 1 | export const fontSizes = { 2 | xxs: '0.625rem', 3 | xs: '0.75rem', 4 | sm: '0.875rem', 5 | md: '1rem', 6 | lg: '1.125rem', 7 | xl: '1.25rem', 8 | '2xl': '1.5rem', 9 | '4xl': '2rem', 10 | '5xl': '2.25rem', 11 | '6xl': '3rem', 12 | '7xl': '4rem', 13 | '8xl': '4.5rem', 14 | '9xl': '6rem', 15 | } 16 | -------------------------------------------------------------------------------- /template/packages/react/src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './components/Box' 2 | export * from './components/Text' 3 | export * from './components/Heading' 4 | export * from './components/Avatar' 5 | export * from './components/Button' 6 | export * from './components/TextInput' 7 | export * from './components/TextArea' 8 | export * from './components/Checkbox' 9 | export * from './components/MultiStep' 10 | 11 | export * from './styles' 12 | -------------------------------------------------------------------------------- /template/packages/react/src/components/Box.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps, ElementType } from 'react' 2 | import { styled } from '../styles' 3 | 4 | export const Box = styled('div', { 5 | padding: '$6', 6 | borderRadius: '$md', 7 | backgroundColor: '$gray800', 8 | border: '1px solid $gray600', 9 | }) 10 | 11 | export interface BoxProps extends ComponentProps { 12 | as?: ElementType 13 | } 14 | 15 | Box.displayName = 'Box' 16 | -------------------------------------------------------------------------------- /template/packages/tokens/src/colors.ts: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | white: '#FFF', 3 | black: '#000', 4 | 5 | gray100: '#E1E1E6', 6 | gray200: '#A9A9B2', 7 | gray400: '#7C7C8A', 8 | gray500: '#505059', 9 | gray600: '#323238', 10 | gray700: '#29292E', 11 | gray800: '#202024', 12 | gray900: '#121214', 13 | 14 | green300: '#00B37E', 15 | green500: '#00875F', 16 | green700: '#015F43', 17 | green900: '#00291D', 18 | } 19 | -------------------------------------------------------------------------------- /template/packages/docs/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { themes } from '@storybook/theming' 2 | 3 | /** @type { import('@storybook/react').Preview } */ 4 | const preview = { 5 | parameters: { 6 | actions: { argTypesRegex: "^on[A-Z].*" }, 7 | controls: { 8 | matchers: { 9 | color: /(background|color)$/i, 10 | date: /Date$/, 11 | }, 12 | }, 13 | docs: { 14 | theme: themes.dark, 15 | } 16 | }, 17 | }; 18 | 19 | export default preview; 20 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project-name", 3 | "private": true, 4 | "workspaces": [ 5 | "packages/*" 6 | ], 7 | "scripts": { 8 | "dev": "turbo run dev --parallel", 9 | "build": "turbo run build", 10 | "changeset": "changeset", 11 | "version-packages": "changeset version", 12 | "release": "turbo run build --filter=!docs && changeset publish" 13 | }, 14 | "devDependencies": { 15 | "@changesets/cli": "^2.26.1", 16 | "turbo": "^1.10.2" 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /template/packages/docs/src/stories/Box.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { Box, BoxProps, Text } from '@brightpack/react' 3 | 4 | export default { 5 | title: 'Surfaces/Box', 6 | component: Box, 7 | args: { 8 | children: Testing box element, 9 | }, 10 | argTypes: { 11 | children: { 12 | control: { 13 | type: null, 14 | }, 15 | }, 16 | }, 17 | } as Meta 18 | 19 | export const Primary: StoryObj = {} 20 | -------------------------------------------------------------------------------- /template/.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /template/packages/ts-config/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": false, 4 | "declaration": true, 5 | "declarationMap": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "inlineSources": true, 9 | "sourceMap": true, 10 | "isolatedModules": true, 11 | "moduleResolution": "node", 12 | "noUnusedLocals": false, 13 | "noUnusedParameters": false, 14 | "preserveWatchOutput": true, 15 | "skipLibCheck": true, 16 | "strict": true 17 | }, 18 | "exclude": ["node_modules"] 19 | } 20 | -------------------------------------------------------------------------------- /template/packages/react/src/components/Avatar/index.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from 'react' 2 | import { AvatarContainer, AvatarFallback, AvatarImage } from './styles' 3 | import { User } from '@phosphor-icons/react' 4 | 5 | export interface AvatarProps extends ComponentProps {} 6 | 7 | export function Avatar(props: AvatarProps) { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | Avatar.displayName = 'Avatar' 20 | -------------------------------------------------------------------------------- /template/packages/react/src/components/Checkbox/index.tsx: -------------------------------------------------------------------------------- 1 | import { Check } from '@phosphor-icons/react' 2 | import { CheckboxContainer, CheckboxIndicator } from './styles' 3 | import { ComponentProps } from 'react' 4 | 5 | export interface CheckboxProps 6 | extends ComponentProps {} 7 | 8 | export function Checkbox(props: CheckboxProps) { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | Checkbox.displayName = 'Checkbox' 19 | -------------------------------------------------------------------------------- /template/packages/docs/src/stories/Checkbox.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { Box, Text, Checkbox, CheckboxProps } from '@brightpack/react' 3 | 4 | export default { 5 | title: 'Form/Checkbox', 6 | component: Checkbox, 7 | tags: ['autodocs'], 8 | args: {}, 9 | decorators: [ 10 | (Story) => ( 11 | 12 | {Story()} 13 | Accept terms of use 14 | 15 | ), 16 | ], 17 | } as Meta 18 | 19 | export const Primary: StoryObj = {} 20 | -------------------------------------------------------------------------------- /template/packages/tokens/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@brightpack/tokens", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "./dist/index.js", 6 | "module": "./dist/index.mjs", 7 | "types": "./dist/index.d.ts", 8 | "scripts": { 9 | "build": "tsup src/index.ts --format esm,cjs --dts", 10 | "dev": "tsup src/index.ts --format esm,cjs --dts --watch", 11 | "lint": "eslint src/**/*.ts* --fix" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "@brightpack/ts-config": "*", 18 | "@brightpack/eslint-config": "*", 19 | "tsup": "^6.7.0", 20 | "typescript": "^5.1.3" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /template/packages/docs/src/styles/tokens-grid.css: -------------------------------------------------------------------------------- 1 | .tokens-grid { 2 | width: 100%; 3 | font-family: sans-serif; 4 | color: #FFF; 5 | border-collapse: collapse; 6 | } 7 | 8 | .tokens-grid thead th { 9 | padding: 0.75rem 1rem; 10 | text-align: left; 11 | } 12 | 13 | .tokens-grid tbody td { 14 | padding: 0.75rem 1rem; 15 | color: #ccc; 16 | } 17 | 18 | .tokens-grid tbody td:first-child { 19 | border-top-left-radius: 8px; 20 | border-bottom-left-radius: 8px; 21 | } 22 | 23 | .tokens-grid tbody td:last-child { 24 | border-top-right-radius: 8px; 25 | border-bottom-right-radius: 8px; 26 | } 27 | 28 | .tokens-grid tbody tr:nth-child(even) td { 29 | background: #444; 30 | } -------------------------------------------------------------------------------- /template/packages/react/src/components/TextInput/index.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps, ElementRef, forwardRef } from 'react' 2 | import { Input, Prefix, TextInputContainer } from './styles' 3 | 4 | export interface TextInputProps extends ComponentProps { 5 | prefix?: string 6 | } 7 | 8 | export const TextInput = forwardRef, TextInputProps>( 9 | ({ prefix, ...props }: TextInputProps, ref) => { 10 | return ( 11 | 12 | {!!prefix && {prefix}} 13 | 14 | 15 | 16 | ) 17 | }, 18 | ) 19 | 20 | TextInput.displayName = 'TextInput' 21 | -------------------------------------------------------------------------------- /template/packages/docs/src/stories/Avatar.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { Avatar, AvatarProps } from '@brightpack/react' 3 | 4 | export default { 5 | title: 'Data display/Avatar', 6 | component: Avatar, 7 | tags: ['autodocs'], 8 | args: { 9 | src: 'https://github.com/pedroaraujo20.png', 10 | alt: 'Pedro Araujo', 11 | }, 12 | argTypes: { 13 | src: { 14 | control: { 15 | type: 'text', 16 | }, 17 | }, 18 | }, 19 | } as Meta 20 | 21 | export const Primary: StoryObj = {} 22 | 23 | export const WithFallback: StoryObj = { 24 | args: { 25 | src: undefined, 26 | }, 27 | } 28 | -------------------------------------------------------------------------------- /template/packages/react/src/styles/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | colors, 3 | fontSizes, 4 | fontWeights, 5 | fonts, 6 | lineHeights, 7 | radii, 8 | space, 9 | } from '@brightpack/tokens' 10 | 11 | import { createStitches, defaultThemeMap } from '@stitches/react' 12 | 13 | export const { 14 | styled, 15 | css, 16 | globalCss, 17 | keyframes, 18 | getCssText, 19 | theme, 20 | createTheme, 21 | config, 22 | } = createStitches({ 23 | themeMap: { 24 | ...defaultThemeMap, 25 | height: 'space', 26 | width: 'space', 27 | }, 28 | 29 | theme: { 30 | colors, 31 | fonts, 32 | fontSizes, 33 | lineHeights, 34 | fontWeights, 35 | space, 36 | radii, 37 | }, 38 | }) 39 | -------------------------------------------------------------------------------- /template/packages/docs/.storybook/main.js: -------------------------------------------------------------------------------- 1 | /** @type { import('@storybook/react-vite').StorybookConfig } */ 2 | const config = { 3 | stories: ["../src/pages/**/*.mdx", "../src/stories/**/*.stories.tsx"], 4 | addons: [ 5 | "@storybook/addon-links", 6 | "@storybook/addon-essentials", 7 | "@storybook/addon-interactions", 8 | "@storybook/addon-a11y" 9 | ], 10 | framework: { 11 | name: "@storybook/react-vite", 12 | options: {}, 13 | }, 14 | docs: { 15 | autodocs: "tag", 16 | }, 17 | viteFinal: (config, { configType }) => { 18 | if (configType === 'PRODUCTION') { 19 | config.base = '/create-design-system/' 20 | } 21 | 22 | return config 23 | } 24 | }; 25 | export default config; 26 | -------------------------------------------------------------------------------- /template/packages/docs/src/components/ColorsGrid.tsx: -------------------------------------------------------------------------------- 1 | import { colors } from '@brightpack/tokens' 2 | import { getContrast } from 'polished' 3 | 4 | export function ColorsGrid() { 5 | return Object.entries(colors).map(([key, color]) => { 6 | return ( 7 |
8 |
16 | ${key} 17 | {color} 18 |
19 |
20 | ) 21 | }) 22 | } 23 | -------------------------------------------------------------------------------- /template/packages/react/src/components/MultiStep/index.tsx: -------------------------------------------------------------------------------- 1 | import { Label, MultiStepContainer, Step, Steps } from './styles' 2 | 3 | export interface MultiStepProps { 4 | size: number 5 | currentStep?: number 6 | } 7 | 8 | export function MultiStep({ size, currentStep = 1 }: MultiStepProps) { 9 | return ( 10 | 11 | 14 | 15 | 16 | {Array.from({ length: size }, (_, i) => i + 1).map((step) => { 17 | return = step} /> 18 | })} 19 | 20 | 21 | ) 22 | } 23 | 24 | MultiStep.displayName = 'MultiStep' 25 | -------------------------------------------------------------------------------- /template/packages/react/src/components/MultiStep/styles.ts: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styles' 2 | import { Text } from '../Text' 3 | 4 | export const MultiStepContainer = styled('div', {}) 5 | 6 | export const Label = styled(Text, { 7 | color: '$gray200', 8 | 9 | defaultVariants: { 10 | size: 'xs', 11 | }, 12 | }) 13 | 14 | export const Steps = styled('div', { 15 | display: 'grid', 16 | gridTemplateColumns: 'repeat(var(--steps-size), 1fr)', 17 | gap: '$2', 18 | marginTop: '$1', 19 | }) 20 | 21 | export const Step = styled('div', { 22 | height: '$1', 23 | borderRadius: '$px', 24 | backgroundColor: '$gray600', 25 | 26 | variants: { 27 | active: { 28 | true: { 29 | backgroundColor: '$gray100', 30 | }, 31 | }, 32 | }, 33 | }) 34 | -------------------------------------------------------------------------------- /template/packages/docs/src/stories/MultiStep.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { Box, MultiStep, MultiStepProps } from '@brightpack/react' 3 | 4 | export default { 5 | title: 'Form/Multi Step', 6 | component: MultiStep, 7 | tags: ['autodocs'], 8 | args: { 9 | size: 4, 10 | currentStep: 1, 11 | }, 12 | decorators: [ 13 | (Story) => ( 14 | 18 | {Story()} 19 | 20 | ), 21 | ], 22 | } as Meta 23 | 24 | export const Primary: StoryObj = {} 25 | 26 | export const Full: StoryObj = { 27 | args: { 28 | currentStep: 4, 29 | }, 30 | } 31 | -------------------------------------------------------------------------------- /template/packages/react/src/components/Avatar/styles.ts: -------------------------------------------------------------------------------- 1 | import * as Avatar from '@radix-ui/react-avatar' 2 | import { styled } from '../../styles' 3 | 4 | export const AvatarContainer = styled(Avatar.Root, { 5 | borderRadius: '$full', 6 | display: 'inline-block', 7 | width: '$16', 8 | height: '$16', 9 | overflow: 'hidden', 10 | }) 11 | 12 | export const AvatarImage = styled(Avatar.Image, { 13 | width: '100%', 14 | height: '100%', 15 | objectFit: 'cover', 16 | borderRadius: 'inherit', 17 | }) 18 | 19 | export const AvatarFallback = styled(Avatar.Fallback, { 20 | width: '100%', 21 | height: '100%', 22 | display: 'flex', 23 | alignItems: 'center', 24 | justifyContent: 'center', 25 | backgroundColor: '$gray600', 26 | color: '$gray800', 27 | 28 | svg: { 29 | width: '$6', 30 | height: '$6', 31 | }, 32 | }) 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@brightpack/create-design-system", 3 | "version": "1.0.2", 4 | "description": "A design system starter from scratch using TypeScript, TurboRepo, StoryBook, Stitches, Vite, Changeset, Eslint, Github Actions, Workflows", 5 | "author": "Pedro Araujo", 6 | "license": "MIT", 7 | "bin": { 8 | "create-design-system": "./cli.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/pedroaraujo20/create-design-system" 13 | }, 14 | "keywords": [ 15 | "template", 16 | "design system", 17 | "react", 18 | "stitches", 19 | "turborepo", 20 | "create design system", 21 | "storybook", 22 | "changeset", 23 | "vite" 24 | ], 25 | "homepage": "https://github.com/pedroaraujo20/create-design-system", 26 | "dependencies": { 27 | "cross-spawn": "^7.0.3" 28 | } 29 | } -------------------------------------------------------------------------------- /template/packages/react/src/components/Heading.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps, ElementType } from 'react' 2 | import { styled } from '../styles' 3 | 4 | export const Heading = styled('h2', { 5 | fontFamily: '$default', 6 | lineHeight: '$shorter', 7 | margin: 0, 8 | color: '$gray100', 9 | 10 | variants: { 11 | size: { 12 | sm: { fontSize: '$xl' }, 13 | md: { fontSize: '$2xl' }, 14 | lg: { fontSize: '$4xl' }, 15 | '2xl': { fontSize: '$5xl' }, 16 | '3xl': { fontSize: '$6xl' }, 17 | '4xl': { fontSize: '$7xl' }, 18 | '5xl': { fontSize: '$8xl' }, 19 | '6xl': { fontSize: '$9xl' }, 20 | }, 21 | }, 22 | 23 | defaultVariants: { 24 | size: 'md', 25 | }, 26 | }) 27 | 28 | export interface HeadingProps extends ComponentProps { 29 | as?: ElementType 30 | } 31 | 32 | Heading.displayName = 'Heading' 33 | -------------------------------------------------------------------------------- /template/packages/react/src/components/TextArea.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from 'react' 2 | import { styled } from '../styles' 3 | 4 | export const TextArea = styled('textarea', { 5 | backgroundColor: '$gray900', 6 | padding: '$3 $4', 7 | borderRadius: '$sm', 8 | boxSizing: 'border-box', 9 | border: '2px solid $gray900', 10 | 11 | fontFamily: '$default', 12 | fontSize: '$sm', 13 | color: '$white', 14 | fontWeight: '$regular', 15 | resize: 'vertical', 16 | minHeight: 80, 17 | 18 | '&:focus': { 19 | outline: 0, 20 | borderColor: '$green300', 21 | }, 22 | 23 | '&:disabled': { 24 | opacity: 0.5, 25 | cursor: 'not-allowed', 26 | }, 27 | 28 | '&:placeholder': { 29 | color: '$gray400', 30 | }, 31 | }) 32 | 33 | export interface TextAreaProps extends ComponentProps {} 34 | 35 | TextArea.displayName = 'TextArea' 36 | -------------------------------------------------------------------------------- /template/packages/docs/src/stories/TextArea.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { 3 | Box, 4 | Text, 5 | TextArea, 6 | TextAreaProps, 7 | } from '@brightpack/react' 8 | 9 | export default { 10 | title: 'Form/Text Area', 11 | component: TextArea, 12 | tags: ['autodocs'], 13 | args: {}, 14 | decorators: [ 15 | (Story) => ( 16 | 20 | Observations 21 | {Story()} 22 | 23 | ), 24 | ], 25 | } as Meta 26 | 27 | export const Primary: StoryObj = { 28 | args: { 29 | placeholder: 'Add any observations...', 30 | }, 31 | } 32 | 33 | export const Disabled: StoryObj = { 34 | args: { 35 | disabled: true, 36 | }, 37 | } 38 | -------------------------------------------------------------------------------- /template/packages/docs/src/components/TokensGrid.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/tokens-grid.css' 2 | 3 | interface TokensGridProps { 4 | tokens: Record 5 | hasRemValue?: boolean 6 | } 7 | 8 | export function TokensGrid({ tokens, hasRemValue = false }: TokensGridProps) { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | {hasRemValue && } 16 | 17 | 18 | 19 | 20 | {Object.entries(tokens).map(([key, value]) => { 21 | return ( 22 | 23 | 24 | 25 | {hasRemValue && ( 26 | 27 | )} 28 | 29 | ) 30 | })} 31 | 32 |
NameValuePixels
{key}{value}{Number(value.replace('rem', '')) * 16}px
33 | ) 34 | } 35 | -------------------------------------------------------------------------------- /template/packages/docs/src/stories/Heading.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { Heading, HeadingProps } from '@brightpack/react' 3 | 4 | export default { 5 | title: 'Typography/Heading', 6 | component: Heading, 7 | tags: ['autodocs'], 8 | args: { 9 | size: 'md', 10 | children: 'Custom title', 11 | }, 12 | argTypes: { 13 | size: { 14 | options: ['sm', 'md', 'lg', '2xl', '4xl', '5xl', '6xl'], 15 | control: { 16 | type: 'inline-radio', 17 | }, 18 | }, 19 | }, 20 | } as Meta 21 | 22 | export const Primary: StoryObj = {} 23 | 24 | export const CustomTag: StoryObj = { 25 | args: { 26 | children: 'H1 heading', 27 | as: 'h1', 28 | }, 29 | parameters: { 30 | docs: { 31 | description: { 32 | story: 33 | 'Heading will always be `h2` by default, but we can change it with the property `as`', 34 | }, 35 | }, 36 | }, 37 | } 38 | -------------------------------------------------------------------------------- /template/.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | concurrency: ${{ github.workflow }}-${{ github.ref }} 9 | 10 | jobs: 11 | release: 12 | name: Release 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout 16 | uses: actions/checkout@v3 17 | 18 | - name: Setup Node.js 19 | uses: actions/setup-node@v3 20 | with: 21 | node-version: 16 22 | cache: 'npm' 23 | cache-dependency-path: '**/package-lock.json' 24 | 25 | - run: npm ci 26 | 27 | - name: Publish to NPM 28 | id: changesets 29 | uses: changesets/action@v1 30 | with: 31 | publish: npm run release 32 | env: 33 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 34 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 35 | TURBO_TOKEN: ${{ secrets.VERCEL_TOKEN }} 36 | TURBO_TEAM: brightscript # Here you add your own turbo team -------------------------------------------------------------------------------- /template/.github/workflows/deploy-docs.yml: -------------------------------------------------------------------------------- 1 | name: Deploy docs 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout 13 | uses: actions/checkout@v3 14 | 15 | - name: Setup Node.js 16 | uses: actions/setup-node@v3 17 | with: 18 | node-version: 16 19 | cache: 'npm' 20 | cache-dependency-path: '**/package-lock.json' 21 | 22 | - run: npm ci 23 | 24 | - run: npm run build 25 | env: 26 | TURBO_TOKEN: ${{ secrets.VERCEL_TOKEN }} 27 | TURBO_TEAM: brightscript # Here you add your own turbo team 28 | 29 | - name: Deploy storybook 30 | working-directory: ./packages/docs 31 | run: touch storybook-static/.nojekyll && npm run deploy-storybook -- --ci --existing-output-dir=storybook-static 32 | env: 33 | GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }} 34 | -------------------------------------------------------------------------------- /template/packages/docs/src/stories/TextInput.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { Box, Text, TextInput, TextInputProps } from '@brightpack/react' 3 | 4 | export default { 5 | title: 'Form/Text Input', 6 | component: TextInput, 7 | tags: ['autodocs'], 8 | args: {}, 9 | decorators: [ 10 | (Story) => ( 11 | 15 | Email address 16 | {Story()} 17 | 18 | ), 19 | ], 20 | } as Meta 21 | 22 | export const Primary: StoryObj = { 23 | args: { 24 | placeholder: 'Type your name', 25 | }, 26 | } 27 | 28 | export const Disabled: StoryObj = { 29 | args: { 30 | disabled: true, 31 | }, 32 | } 33 | 34 | export const WithPrefix: StoryObj = { 35 | args: { 36 | prefix: 'cal.com/', 37 | placeholder: 'your-username', 38 | }, 39 | } 40 | -------------------------------------------------------------------------------- /template/packages/react/src/components/Text.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps, ElementType } from 'react' 2 | import { styled } from '../styles' 3 | 4 | export const Text = styled('p', { 5 | fontFamily: '$default', 6 | lineHeight: '$base', 7 | margin: 0, 8 | color: '$gray100', 9 | 10 | variants: { 11 | size: { 12 | xxs: { fontSize: '$xxs' }, 13 | xs: { fontSize: '$xs' }, 14 | sm: { fontSize: '$sm' }, 15 | md: { fontSize: '$md' }, 16 | lg: { fontSize: '$lg' }, 17 | xl: { fontSize: '$xl' }, 18 | '2xl': { fontSize: '$2xl' }, 19 | '4xl': { fontSize: '$4xl' }, 20 | '5xl': { fontSize: '$5xl' }, 21 | '6xl': { fontSize: '$6xl' }, 22 | '7xl': { fontSize: '$7xl' }, 23 | '8xl': { fontSize: '$8xl' }, 24 | '9xl': { fontSize: '$9xl' }, 25 | }, 26 | }, 27 | 28 | defaultVariants: { 29 | size: 'md', 30 | }, 31 | }) 32 | 33 | export interface TextProps extends ComponentProps { 34 | as?: ElementType 35 | } 36 | 37 | Text.displayName = 'Text' 38 | -------------------------------------------------------------------------------- /template/packages/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@brightpack/react", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "./dist/index.js", 6 | "module": "./dist/index.mjs", 7 | "types": "./dist/index.d.ts", 8 | "scripts": { 9 | "build": "tsup src/index.tsx --format esm,cjs --dts --external react", 10 | "dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch", 11 | "lint": "eslint src/**/*.ts* --fix" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "@brightpack/eslint-config": "*", 18 | "@brightpack/tokens": "*", 19 | "@brightpack/ts-config": "*", 20 | "@types/react": "^18.2.9", 21 | "@types/react-dom": "^18.2.4", 22 | "react": "^18.2.0", 23 | "tsup": "^6.7.0", 24 | "typescript": "^5.1.3" 25 | }, 26 | "dependencies": { 27 | "@phosphor-icons/react": "^2.0.9", 28 | "@radix-ui/react-avatar": "^1.0.3", 29 | "@radix-ui/react-checkbox": "^1.0.4", 30 | "@stitches/react": "^1.2.8" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const spawn = require('cross-spawn'); 4 | const fs = require('fs'); 5 | const path = require('path'); 6 | 7 | const projectName = process.argv[2]; 8 | 9 | const currentDir = process.cwd(); 10 | const projectDir = path.resolve(currentDir, projectName); 11 | fs.mkdirSync(projectDir, { recursive: true }); 12 | 13 | const templateDir = path.resolve(__dirname, 'template'); 14 | fs.cpSync(templateDir, projectDir, { recursive: true }); 15 | 16 | fs.renameSync( 17 | path.join(projectDir, 'gitignore'), 18 | path.join(projectDir, '.gitignore') 19 | ); 20 | 21 | const projectPackageJson = require(path.join(projectDir, 'package.json')); 22 | 23 | projectPackageJson.name = projectName; 24 | 25 | fs.writeFileSync( 26 | path.join(projectDir, 'package.json'), 27 | JSON.stringify(projectPackageJson, null, 2) 28 | ); 29 | 30 | spawn.sync('npm', ['install'], { stdio: 'inherit' }); 31 | 32 | console.log('Success! Your new project is ready.'); 33 | console.log(`Created ${projectName} at ${projectDir}`); 34 | console.log(`To run your project: 35 | cd ${projectName} 36 | npm install 37 | npm run dev 38 | `) -------------------------------------------------------------------------------- /template/packages/docs/src/stories/Text.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { Text, TextProps } from '@brightpack/react' 3 | 4 | export default { 5 | title: 'Typography/Text', 6 | component: Text, 7 | tags: ['autodocs'], 8 | args: { 9 | size: 'md', 10 | children: 11 | 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus incidunt cumque, adipisci omnis laboriosam neque ipsum iste, consectetur reiciendis aliquam earum. Fugit perferendis recusandae odio nulla vel earum sit minus?', 12 | }, 13 | argTypes: { 14 | size: { 15 | options: [ 16 | 'xxs', 17 | 'xs', 18 | 'sm', 19 | 'md', 20 | 'lg', 21 | 'xl', 22 | '2xl', 23 | '4xl', 24 | '5xl', 25 | '6xl', 26 | '7xl', 27 | '8xl', 28 | '9xl', 29 | ], 30 | control: { 31 | type: 'inline-radio', 32 | }, 33 | }, 34 | }, 35 | } as Meta 36 | 37 | export const Primary: StoryObj = {} 38 | 39 | export const CustomTag: StoryObj = { 40 | args: { 41 | children: 'Strong text', 42 | as: 'strong', 43 | }, 44 | } 45 | -------------------------------------------------------------------------------- /template/packages/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@brightpack/docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "storybook dev -p 6006", 9 | "deploy-storybook": "storybook-to-ghpages", 10 | "build": "storybook build" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "@storybook/addon-a11y": "^7.0.20", 17 | "@storybook/addon-essentials": "^7.0.20", 18 | "@storybook/addon-interactions": "^7.0.20", 19 | "@storybook/addon-links": "^7.0.20", 20 | "@storybook/blocks": "^7.0.20", 21 | "@storybook/react": "^7.0.20", 22 | "@storybook/react-vite": "^7.0.20", 23 | "@storybook/storybook-deployer": "^2.8.16", 24 | "@storybook/testing-library": "^0.0.14-next.2", 25 | "@vitejs/plugin-react": "^4.0.0", 26 | "prop-types": "^15.8.1", 27 | "storybook": "^7.0.20", 28 | "vite": "^4.3.9" 29 | }, 30 | "dependencies": { 31 | "@brightpack/eslint-config": "*", 32 | "@brightpack/react": "*", 33 | "@brightpack/tokens": "*", 34 | "@brightpack/ts-config": "*", 35 | "@phosphor-icons/react": "^2.0.9", 36 | "polished": "^4.2.2", 37 | "react": "^18.2.0", 38 | "react-dom": "^18.2.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /template/packages/react/src/components/TextInput/styles.ts: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styles' 2 | 3 | export const TextInputContainer = styled('div', { 4 | backgroundColor: '$gray900', 5 | borderRadius: '$sm', 6 | boxSizing: 'border-box', 7 | border: '2px solid $gray900', 8 | display: 'flex', 9 | alignItems: 'center', 10 | 11 | variants: { 12 | size: { 13 | sm: { 14 | padding: '$2 $3', 15 | }, 16 | md: { 17 | padding: '$3 $4', 18 | }, 19 | }, 20 | }, 21 | 22 | '&:has(input:focus)': { 23 | borderColor: '$green300', 24 | }, 25 | 26 | '&:has(input:disabled)': { 27 | opacity: 0.5, 28 | cursor: 'not-allowed', 29 | }, 30 | 31 | defaultVariants: { 32 | size: 'md', 33 | }, 34 | }) 35 | 36 | export const Prefix = styled('span', { 37 | fontFamily: '$default', 38 | fontSize: '$sm', 39 | color: '$gray400', 40 | fontWeight: '$regular', 41 | }) 42 | 43 | export const Input = styled('input', { 44 | fontFamily: '$default', 45 | fontSize: '$sm', 46 | color: '$white', 47 | fontWeight: '$regular', 48 | background: 'transparent', 49 | border: 0, 50 | width: '100%', 51 | 52 | '&:focus': { 53 | outline: 0, 54 | }, 55 | 56 | '&:disabled': { 57 | cursor: 'not-allowed', 58 | }, 59 | 60 | '&::placeholder': { 61 | color: '$gray400', 62 | }, 63 | }) 64 | -------------------------------------------------------------------------------- /template/packages/react/src/components/Checkbox/styles.ts: -------------------------------------------------------------------------------- 1 | import * as Checkbox from '@radix-ui/react-checkbox' 2 | import { styled, keyframes } from '../../styles' 3 | 4 | export const CheckboxContainer = styled(Checkbox.Root, { 5 | all: 'unset', 6 | width: '$6', 7 | height: '$6', 8 | backgroundColor: '$gray900', 9 | borderRadius: '$xs', 10 | lineHeight: 0, 11 | cursor: 'pointer', 12 | overflow: 'hidden', 13 | boxSizing: 'border-box', 14 | display: 'flex', 15 | justifyContent: 'center', 16 | alignItems: 'center', 17 | border: '2px solid $gray900', 18 | 19 | '&[data-state="checked"]': { 20 | backgroundColor: '$green300', 21 | }, 22 | 23 | '&:focus, &[data-state="checked"]': { 24 | border: '2px solid $green300', 25 | }, 26 | }) 27 | 28 | const slideIn = keyframes({ 29 | from: { 30 | transform: 'translateY(-100%)', 31 | }, 32 | to: { 33 | transform: 'translateY(0)', 34 | }, 35 | }) 36 | 37 | const slideOut = keyframes({ 38 | from: { 39 | transform: 'translateY(0)', 40 | }, 41 | to: { 42 | transform: 'translateY(-100%)', 43 | }, 44 | }) 45 | 46 | export const CheckboxIndicator = styled(Checkbox.Indicator, { 47 | color: '$white', 48 | width: '$4', 49 | height: '$4', 50 | 51 | '&[data-state="checked"]': { 52 | animation: `${slideIn} 200ms ease-out`, 53 | }, 54 | 55 | '&[data-state="unchecked"]': { 56 | animation: `${slideOut} 200ms ease-out`, 57 | }, 58 | }) 59 | -------------------------------------------------------------------------------- /template/packages/docs/src/stories/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { StoryObj, Meta } from '@storybook/react' 2 | import { Button, ButtonProps } from '@brightpack/react' 3 | import { ArrowRight } from '@phosphor-icons/react' 4 | 5 | export default { 6 | title: 'Form/Button', 7 | component: Button, 8 | tags: ['autodocs'], 9 | args: { 10 | children: 'Send', 11 | variant: 'primary', 12 | size: 'md', 13 | disabled: false, 14 | }, 15 | argTypes: { 16 | variant: { 17 | options: ['primary', 'secondary', 'tertiary'], 18 | control: { 19 | type: 'inline-radio', 20 | }, 21 | }, 22 | size: { 23 | options: ['sm', 'md'], 24 | control: { 25 | type: 'inline-radio', 26 | }, 27 | }, 28 | disabled: { 29 | control: { 30 | type: 'boolean', 31 | }, 32 | }, 33 | onClick: { 34 | action: 'click', 35 | }, 36 | }, 37 | } as Meta 38 | 39 | export const Primary: StoryObj = {} 40 | 41 | export const Secondary: StoryObj = { 42 | args: { 43 | variant: 'secondary', 44 | children: 'Create new', 45 | }, 46 | } 47 | 48 | export const Tertiary: StoryObj = { 49 | args: { 50 | variant: 'tertiary', 51 | children: 'Cancel', 52 | }, 53 | } 54 | 55 | export const Small: StoryObj = { 56 | args: { 57 | size: 'sm', 58 | }, 59 | } 60 | 61 | export const WithIcon: StoryObj = { 62 | args: { 63 | children: ( 64 | <> 65 | Next Step 66 | 67 | 68 | ), 69 | }, 70 | } 71 | 72 | export const Disabled: StoryObj = { 73 | args: { 74 | disabled: true, 75 | }, 76 | } 77 | -------------------------------------------------------------------------------- /template/packages/react/src/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps, ElementType } from 'react' 2 | import { styled } from '../styles' 3 | 4 | export const Button = styled('button', { 5 | all: 'unset', 6 | borderRadius: '$sm', 7 | fontSize: '$sm', 8 | fontWeight: '$medium', 9 | fontFamily: '$default', 10 | textAlign: 'center', 11 | minWidth: 120, 12 | boxSizing: 'border-box', 13 | padding: '0 $4', 14 | 15 | display: 'flex', 16 | alignItems: 'center', 17 | justifyContent: 'center', 18 | gap: '$2', 19 | 20 | cursor: 'pointer', 21 | 22 | svg: { 23 | width: '$4', 24 | height: '$4', 25 | }, 26 | 27 | '&:disabled': { 28 | cursor: 'not-allowed', 29 | }, 30 | 31 | '&:focus': { 32 | boxShadow: '0 0 0 2px $colors$gray100', 33 | }, 34 | 35 | variants: { 36 | variant: { 37 | primary: { 38 | color: '$white', 39 | background: '$green500', 40 | 41 | '&:not(:disabled):hover': { 42 | background: '$green300', 43 | }, 44 | 45 | '&:disabled': { 46 | backgroundColor: '$gray200', 47 | }, 48 | }, 49 | 50 | secondary: { 51 | color: '$green300', 52 | border: '2px solid $green500', 53 | 54 | '&:not(:disabled):hover': { 55 | background: '$green500', 56 | color: '$white', 57 | }, 58 | 59 | '&:disabled': { 60 | color: '$gray200', 61 | borderColor: '$gray200', 62 | }, 63 | }, 64 | 65 | tertiary: { 66 | color: '$gray100', 67 | 68 | '&:not(:disabled):hover': { 69 | color: '$white', 70 | }, 71 | 72 | '&:disabled': { 73 | color: '$gray600', 74 | }, 75 | }, 76 | }, 77 | 78 | size: { 79 | sm: { 80 | height: 38, 81 | }, 82 | 83 | md: { 84 | height: 46, 85 | }, 86 | }, 87 | }, 88 | 89 | defaultVariants: { 90 | variant: 'primary', 91 | size: 'md', 92 | }, 93 | }) 94 | 95 | export interface ButtonProps extends ComponentProps { 96 | as?: ElementType 97 | } 98 | 99 | Button.displayName = 'Button' 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Create Design System 2 | 3 | This is a design system starter from scratch using TypeScript, TurboRepo, StoryBook, Stitches, Changeset, Eslint, Github Actions, Workflows. 4 | It has all that you need to create your own design system, with release, CI/CD ready. 5 | 6 | 7 | ## Quick Overview 8 | 9 | ```sh 10 | npm i -g @brightpack/create-design-system 11 | npx create-design-system my-design-system 12 | cd my-design-system 13 | npm install 14 | npm run dev 15 | ``` 16 | 17 | It will create a directory called `my-design-system` inside the current folder.
18 | Inside that directory, it will generate the initial project structure and install the transitive dependencies: 19 | 20 | ## Structure 21 | 22 | ``` 23 | my-design-system 24 | ├───.changeset 25 | ├───.github 26 | │ └───workflows 27 | └───packages 28 | ├───docs 29 | │ ├───.storybook 30 | │ ├───node_modules 31 | │ │ ├───.cache 32 | │ │ │ ├───.vite-storybook 33 | │ │ │ │ └───deps 34 | │ │ │ ├───sb-manager 35 | │ │ │ │ ├───a11y-9 36 | │ │ │ │ ├───essentials-actions-2 37 | │ │ │ │ ├───essentials-backgrounds-3 38 | │ │ │ │ ├───essentials-controls-1 39 | │ │ │ │ ├───essentials-measure-6 40 | │ │ │ │ ├───essentials-outline-7 41 | │ │ │ │ ├───essentials-toolbars-5 42 | │ │ │ │ ├───essentials-viewport-4 43 | │ │ │ │ ├───interactions-8 44 | │ │ │ │ ├───links-0 45 | │ │ │ │ └───storybook-10 46 | │ │ │ ├───storybook 47 | │ │ │ │ ├───dev-server 48 | │ │ │ │ └───public 49 | │ │ │ │ └───sb-addons 50 | │ │ │ │ ├───a11y-9 51 | │ │ │ │ ├───essentials-actions-2 52 | │ │ │ │ ├───essentials-backgrounds-3 53 | │ │ │ │ ├───essentials-controls-1 54 | │ │ │ │ ├───essentials-measure-6 55 | │ │ │ │ ├───essentials-outline-7 56 | │ │ │ │ ├───essentials-toolbars-5 57 | │ │ │ │ ├───essentials-viewport-4 58 | │ │ │ │ ├───interactions-8 59 | │ │ │ │ ├───links-0 60 | │ │ │ │ └───storybook-10 61 | │ │ │ └───vite-plugin-externals 62 | │ │ │ └───@storybook 63 | │ │ └───@vitejs 64 | │ │ └───plugin-react 65 | │ │ └───dist 66 | │ └───src 67 | │ ├───components 68 | │ ├───pages 69 | │ │ └───tokens 70 | │ ├───stories 71 | │ └───styles 72 | ├───eslint-config 73 | ├───react 74 | │ ├───dist 75 | │ └───src 76 | │ ├───components 77 | │ │ ├───Avatar 78 | │ │ ├───Checkbox 79 | │ │ ├───MultiStep 80 | │ │ └───TextInput 81 | │ └───styles 82 | ├───tokens 83 | │ ├───dist 84 | │ └───src 85 | └───ts-config 86 | ``` 87 | 88 | ## Configuring your Github Pages 89 | 90 | - On `packages/docs/.storybook/main.js` change the `config.base` to the name of your project as you created: 91 | 92 | ```js 93 | viteFinal: (config, { configType }) => { 94 | if (configType === 'PRODUCTION') { 95 | config.base = '/create-design-system/' 96 | } 97 | 98 | return config 99 | } 100 | ``` 101 | 102 | - On your repository, go to `Settings - Actions - General - Workflow permissions` and mark `Read and write permissions` 103 | 104 | ### Setup env keys to publish 105 | 106 | - You will need to have this keys on your github project: `VERCEL_TOKEN` and `NPM_TOKEN` 107 | 108 | - To create a `NPM_TOKEN`, go to `Access Tokens - Generate New Token - Classic Token` - Add a name and select `Automation` 109 | 110 | ![NPM Menu](image.png) 111 | 112 | ![Generate new token](image-1.png) 113 | 114 | ![Creating new token](image-2.png) 115 | 116 | - To create a `VERCEL_TOKEN`, see the doc of Vercel https://vercel.com/docs/rest-api#introduction/api-basics/authentication 117 | 118 | - Don't forget to create your `TURBO_TEAM` and add into the `.github/workflows/deploy-docs.yml` and `.github/workflows/release.yml`. 119 | 120 | - With all in hands, go to your project on github, `Settings - Security - Secrets and variables - Actions - New repository secret` and add each one that you created. Now everything should be ready. 121 | 122 | ### Publish 123 | 124 | - To publish, you'll have to create a organization on `NPM`. Click on `Create New Organization` and choose a name for the org and click on `Unlimited public packages`. Remember that the name of the org will be used on your package.json. 125 | 126 | Example: 127 | - Organization name: brightpack 128 | - package.json: 129 | - "name": "@brightpack/name-of-your-package" 130 | 131 | ![Create new organization](image-3.png) 132 | 133 | ![New org](image-4.png) 134 | 135 | ### Example 136 | 137 | This is a example of StoryBook created: 138 | 139 | https://pedroaraujo20.github.io/design-system/ 140 | --------------------------------------------------------------------------------