├── apps ├── storybook │ ├── .gitignore │ ├── .eslintrc.js │ ├── backfill.config.js │ ├── .babelrc │ ├── tsconfig.json │ ├── src │ │ ├── storyshots.test.ts │ │ ├── addon-docs │ │ │ ├── docs.stories.mdx │ │ │ └── docs-only.stories.mdx │ │ ├── emoji-button.stories.js │ │ ├── emoji-button.js │ │ ├── button.stories.tsx │ │ ├── AccountForm.stories.tsx │ │ ├── AccountForm.tsx │ │ └── __snapshots__ │ │ │ └── storyshots.test.ts.snap │ ├── .storybook │ │ ├── preview.js │ │ └── main.ts │ └── package.json ├── nestjs │ ├── .gitignore │ ├── .eslintrc.js │ ├── nest-cli.json │ ├── tsconfig.build.json │ ├── src │ │ ├── app.service.ts │ │ ├── main.ts │ │ ├── app.module.ts │ │ └── app.controller.ts │ ├── tsconfig.json │ └── package.json ├── docs │ ├── pages │ │ ├── index.module.scss │ │ └── index.tsx │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── next.config.js │ ├── next-env.d.ts │ ├── declarations.d.ts │ └── package.json └── web │ ├── pages │ ├── index.module.scss │ └── index.tsx │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── next.config.js │ ├── next-env.d.ts │ ├── declarations.d.ts │ └── package.json ├── .env.example ├── packages ├── ui │ ├── index.tsx │ ├── .eslintrc.js │ ├── components │ │ ├── button.module.scss │ │ └── Button.tsx │ ├── tsconfig.json │ ├── package.json │ └── declarations.d.ts ├── utils │ ├── .gitignore │ ├── .eslintrc.js │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ └── package.json ├── config │ ├── .babelrc │ ├── README.MD │ ├── eslint-preset.js │ └── package.json └── tsconfig │ ├── README.md │ ├── package.json │ ├── react-library.json │ ├── base.json │ └── nextjs.json ├── pnpm-workspace.yaml ├── commitlint.config.js ├── .eslintignore ├── .vscode └── settings.json ├── .prettierignore ├── .dockerignore ├── .editorconfig ├── .prettierrc.js ├── CHANGELOG.md ├── .gitignore ├── README.md ├── LICENSE ├── package.json └── CODE_OF_CONDUCT.md /apps/storybook/.gitignore: -------------------------------------------------------------------------------- 1 | storybook-static -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | # Duplicate and rename this file .env or .env.local -------------------------------------------------------------------------------- /packages/ui/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './components/Button'; 2 | -------------------------------------------------------------------------------- /apps/nestjs/.gitignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist 3 | /node_modules -------------------------------------------------------------------------------- /apps/docs/pages/index.module.scss: -------------------------------------------------------------------------------- 1 | .example { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /apps/web/pages/index.module.scss: -------------------------------------------------------------------------------- 1 | .example { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /packages/utils/.gitignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist 3 | /node_modules -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "apps/*" 3 | - "packages/*" 4 | -------------------------------------------------------------------------------- /apps/docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = require("config/eslint-preset"); 2 | -------------------------------------------------------------------------------- /apps/nestjs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = require('config/eslint-preset'); 2 | -------------------------------------------------------------------------------- /apps/web/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = require("config/eslint-preset"); 2 | -------------------------------------------------------------------------------- /packages/ui/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = require('config/eslint-preset'); 2 | -------------------------------------------------------------------------------- /apps/storybook/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = require('config/eslint-preset'); 2 | -------------------------------------------------------------------------------- /packages/utils/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = require('config/eslint-preset'); 2 | -------------------------------------------------------------------------------- /packages/config/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel"], 3 | "plugins": [] 4 | } -------------------------------------------------------------------------------- /packages/ui/components/button.module.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | background: pink; 3 | } 4 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /apps/nestjs/nest-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "collection": "@nestjs/schematics", 3 | "sourceRoot": "src" 4 | } 5 | -------------------------------------------------------------------------------- /apps/storybook/backfill.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | outputGlob: ['storybook-static/**'], 3 | }; 4 | -------------------------------------------------------------------------------- /packages/utils/src/index.ts: -------------------------------------------------------------------------------- 1 | export const exampleService = (): object[] => [{ hello: 'hello there' }]; 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | build 4 | *.tsbuildinfo 5 | *.gitignore 6 | *.svg 7 | *.lock 8 | *.npmignore -------------------------------------------------------------------------------- /apps/storybook/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib", 3 | "typescript.enablePromptUseWorkspaceTsdk": true 4 | } 5 | -------------------------------------------------------------------------------- /packages/tsconfig/README.md: -------------------------------------------------------------------------------- 1 | # `tsconfig` 2 | 3 | These are base shared `tsconfig.json`s from which all other `tsconfig.json`'s inherit from. 4 | -------------------------------------------------------------------------------- /packages/config/README.MD: -------------------------------------------------------------------------------- 1 | # Config 2 | 3 | Includes global eslint config. Only has next, react, and react-dom as dependencies because they are peer deps of eslint-config-next. -------------------------------------------------------------------------------- /apps/docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/nextjs.json", 3 | "include": ["next-env.d.ts", "declarations.d.ts", "**/*.ts", "**/*.tsx"], 4 | "exclude": ["node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /apps/web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/nextjs.json", 3 | "include": ["next-env.d.ts", "declarations.d.ts", "**/*.ts", "**/*.tsx"], 4 | "exclude": ["node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /apps/nestjs/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | /* Extend the config that contains the path aliases. */ 3 | "extends": "./tsconfig.json", 4 | "exclude": ["node_modules", "test", "dist", "**/*spec.ts"] 5 | } 6 | -------------------------------------------------------------------------------- /apps/nestjs/src/app.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@nestjs/common'; 2 | 3 | @Injectable() 4 | export class AppService { 5 | public getHello(): string { 6 | return 'Hello World!'; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base.json", 3 | "compilerOptions": { 4 | "outDir": "./dist" 5 | }, 6 | "include": ["src/**/*"], 7 | "exclude": ["dist", "node_modules"] 8 | } 9 | -------------------------------------------------------------------------------- /apps/docs/next.config.js: -------------------------------------------------------------------------------- 1 | const withPlugins = require('next-compose-plugins'); 2 | const withTM = require('next-transpile-modules')(['ui']); 3 | 4 | module.exports = withPlugins([withTM], { 5 | reactStrictMode: true, 6 | }); 7 | -------------------------------------------------------------------------------- /apps/web/next.config.js: -------------------------------------------------------------------------------- 1 | const withPlugins = require('next-compose-plugins'); 2 | const withTM = require('next-transpile-modules')(['ui', 'utils']); 3 | 4 | module.exports = withPlugins([withTM], { 5 | reactStrictMode: true, 6 | }); 7 | -------------------------------------------------------------------------------- /apps/storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/base", 3 | "compilerOptions": { 4 | "plugins": [{ "name": "typescript-plugin-css-modules" }], 5 | "jsx": "preserve" 6 | }, 7 | "include": ["src/*", ".storybook/main.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /apps/web/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /apps/docs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /apps/storybook/src/storyshots.test.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import initStoryshots from '@storybook/addon-storyshots'; 3 | 4 | initStoryshots({ 5 | framework: 'react', 6 | configPath: path.join(__dirname, '..', '.storybook'), 7 | }); 8 | -------------------------------------------------------------------------------- /packages/tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsconfig", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "index.js", 6 | "files": [ 7 | "base.json", 8 | "nextjs.json", 9 | "react-library.json" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /apps/nestjs/src/main.ts: -------------------------------------------------------------------------------- 1 | import { NestFactory } from '@nestjs/core'; 2 | import { AppModule } from './app.module'; 3 | 4 | async function bootstrap() { 5 | const app = await NestFactory.create(AppModule); 6 | await app.listen(3000); 7 | } 8 | bootstrap(); 9 | -------------------------------------------------------------------------------- /apps/docs/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from 'ui'; 2 | import styles from './index.module.scss'; 3 | 4 | export default function Docs() { 5 | return ( 6 |
7 |

Docs

8 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "compilerOptions": { 4 | "plugins": [{ "name": "typescript-plugin-css-modules" }] 5 | }, 6 | "include": ["declarations.d.ts", "**/*.ts", "**/*.tsx"], 7 | "exclude": ["dist", "build", "node_modules"] 8 | } 9 | -------------------------------------------------------------------------------- /apps/nestjs/src/app.module.ts: -------------------------------------------------------------------------------- 1 | import { Module } from '@nestjs/common'; 2 | import { AppController } from './app.controller'; 3 | import { AppService } from './app.service'; 4 | 5 | @Module({ 6 | imports: [], 7 | controllers: [AppController], 8 | providers: [AppService], 9 | }) 10 | export class AppModule {} 11 | -------------------------------------------------------------------------------- /packages/tsconfig/react-library.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "React Library", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "lib": ["ES2015"], 7 | "module": "ESNext", 8 | "target": "ES6", 9 | "jsx": "react-jsx" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | 3 | **/dist 4 | /coverage 5 | 6 | *.prisma 7 | *.graphql 8 | node_modules 9 | 10 | /coverage 11 | /libpeerconnection.log 12 | npm-debug.log 13 | yarn-error.log 14 | testem.log 15 | /typings 16 | 17 | postgresql_data 18 | uploads 19 | redis 20 | backups 21 | restore -------------------------------------------------------------------------------- /apps/web/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from 'ui'; 2 | import { exampleService } from 'utils'; 3 | import styles from './index.module.scss'; 4 | 5 | export default function Web() { 6 | console.log(exampleService()); 7 | return ( 8 |
9 |

Web

10 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /apps/nestjs/src/app.controller.ts: -------------------------------------------------------------------------------- 1 | import { Controller, Get } from '@nestjs/common'; 2 | import { AppService } from './app.service'; 3 | 4 | @Controller() 5 | export class AppController { 6 | public constructor(private readonly appService: AppService) {} 7 | 8 | @Get() 9 | public getHello(): string { 10 | return this.appService.getHello(); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/config/eslint-preset.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['next/babel', 'next/core-web-vitals', 'prettier'], 3 | settings: { 4 | next: { 5 | rootDir: ['apps/*/', 'packages/*/'], 6 | }, 7 | }, 8 | ignorePatterns: ['.eslintrc.js'], 9 | rules: { 10 | '@next/next/no-html-link-for-pages': 'off', 11 | 'react/jsx-key': 'off', 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /apps/storybook/src/addon-docs/docs.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Story } from '@storybook/addon-docs'; 2 | import { Button } from 'ui'; 3 | 4 | 5 | 6 | # Button MDX 7 | 8 | 9 | 8 | ); 9 | 10 | EmojiButton.propTypes = { 11 | /** 12 | * A label to show on the button 13 | */ 14 | label: PropTypes.string, 15 | }; 16 | 17 | EmojiButton.defaultProps = { 18 | label: 'Hello', 19 | }; 20 | -------------------------------------------------------------------------------- /packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "utils", 3 | "version": "0.0.0", 4 | "main": "dist/index", 5 | "types": "dist/index", 6 | "files": [ 7 | "dist" 8 | ], 9 | "scripts": { 10 | "build": "backfill -- tsc", 11 | "clean": "rimraf -rf ./dist", 12 | "prepublishOnly": "pnpm run build" 13 | }, 14 | "devDependencies": { 15 | "config": "workspace:*", 16 | "rimraf": "~4.1.2", 17 | "tsconfig": "workspace:*", 18 | "typescript": "~4.9.5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /apps/docs/declarations.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | declare module '*.svg' { 3 | export const ReactComponent: any; 4 | export const content: any; 5 | } 6 | 7 | interface IClassNames { 8 | [className: string]: string; 9 | } 10 | 11 | declare module '*.module.css' { 12 | const classNames: IClassNames; 13 | export = classNames; 14 | } 15 | 16 | declare module '*.module.scss' { 17 | const classNames: IClassNames; 18 | export = classNames; 19 | } 20 | export {}; 21 | -------------------------------------------------------------------------------- /apps/web/declarations.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | declare module '*.svg' { 3 | export const ReactComponent: any; 4 | export const content: any; 5 | } 6 | 7 | interface IClassNames { 8 | [className: string]: string; 9 | } 10 | 11 | declare module '*.module.css' { 12 | const classNames: IClassNames; 13 | export = classNames; 14 | } 15 | 16 | declare module '*.module.scss' { 17 | const classNames: IClassNames; 18 | export = classNames; 19 | } 20 | export {}; 21 | -------------------------------------------------------------------------------- /packages/ui/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import React, { ButtonHTMLAttributes } from 'react'; 2 | import styles from './button.module.scss'; 3 | 4 | export interface ButtonProps extends ButtonHTMLAttributes { 5 | /** 6 | * A label to show on the button 7 | */ 8 | label: string; 9 | } 10 | 11 | export const Button = ({ label = 'Hello', ...props }: ButtonProps) => ( 12 | 15 | ); 16 | -------------------------------------------------------------------------------- /packages/ui/declarations.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | declare module '*.svg' { 3 | export const ReactComponent: any; 4 | export const content: any; 5 | } 6 | 7 | interface IClassNames { 8 | [className: string]: string; 9 | } 10 | 11 | declare module '*.module.css' { 12 | const classNames: IClassNames; 13 | export = classNames; 14 | } 15 | 16 | declare module '*.module.scss' { 17 | const classNames: IClassNames; 18 | export = classNames; 19 | } 20 | export {}; 21 | -------------------------------------------------------------------------------- /apps/nestjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/nextjs.json", 3 | "include": ["**/*.ts", "**/*.tsx"], 4 | "exclude": ["node_modules", "dist"], 5 | "compilerOptions": { 6 | "module": "commonjs", 7 | "declaration": true, 8 | "removeComments": true, 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "allowSyntheticDefaultImports": true, 12 | "target": "es2017", 13 | "sourceMap": true, 14 | "outDir": "./dist", 15 | "incremental": true, 16 | "noEmit": false, 17 | "types": [] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "config", 3 | "version": "0.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "files": [ 7 | "eslint-preset.js" 8 | ], 9 | "dependencies": { 10 | "@babel/core": "^7.21.0", 11 | "@babel/preset-env": "^7.20.2", 12 | "eslint": "^8.34.0", 13 | "eslint-config-next": "^13.1.6", 14 | "eslint-config-prettier": "^8.6.0", 15 | "eslint-plugin-react": "7.32.2", 16 | "next": "^12.3.4", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "typescript": "^4.9.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | # All node_modules directories 2 | node_modules 3 | **/node_modules 4 | 5 | # All secrets 6 | **/.env.local 7 | **/.env.*.local 8 | 9 | # By default all git files 10 | .git 11 | .gitignore 12 | .gitattributes 13 | .github 14 | 15 | # Used when building with nextjs (next-eslint) 16 | !.eslintrc.js 17 | !.prettierrc.js 18 | 19 | # npm 20 | !.npmrc 21 | 22 | # Docker related 23 | .dockerignore 24 | Dockerfile 25 | docker-compose.*.yml 26 | docker-compose.yml 27 | docker 28 | 29 | # Log files 30 | logs 31 | *.log 32 | 33 | # Temp files 34 | tmp 35 | *.tmp 36 | 37 | # IDE related 38 | 39 | .idea 40 | .vscode 41 | -------------------------------------------------------------------------------- /packages/tsconfig/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "composite": false, 6 | "declaration": true, 7 | "declarationMap": true, 8 | "esModuleInterop": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "inlineSources": false, 11 | "isolatedModules": true, 12 | "moduleResolution": "node", 13 | "noUnusedLocals": false, 14 | "noUnusedParameters": false, 15 | "preserveWatchOutput": true, 16 | "skipLibCheck": true, 17 | "strict": true 18 | }, 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | # Unix-style newlines with a newline ending every file 4 | [*] 5 | end_of_line = lf 6 | indent_style = space 7 | indent_size = 4 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | max_line_length = 80 12 | 13 | # Tab indentation (no size specified) 14 | [*.js] 15 | indent_style = tab 16 | 17 | # Indentation override for all JS under lib directory 18 | [lib/**.js] 19 | indent_style = space 20 | indent_size = 2 21 | 22 | # Matches the exact files either package.json or .travis.yml 23 | [{package.json,*.yml,*.yaml}] 24 | indent_style = space 25 | indent_size = 2 26 | -------------------------------------------------------------------------------- /packages/tsconfig/nextjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Next.js", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "target": "es5", 7 | "lib": ["dom", "dom.iterable", "esnext"], 8 | "allowJs": true, 9 | "skipLibCheck": true, 10 | "strict": false, 11 | "forceConsistentCasingInFileNames": true, 12 | "noEmit": true, 13 | "incremental": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "jsx": "preserve" 19 | }, 20 | "include": ["src", "next-env.d.ts"], 21 | "exclude": ["node_modules"] 22 | } 23 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 120, 3 | tabWidth: 1, 4 | useTabs: true, 5 | semi: true, 6 | singleQuote: true, 7 | quoteProps: 'as-needed', 8 | jsxSingleQuote: false, 9 | trailingComma: 'all', 10 | bracketSpacing: true, 11 | bracketSameLine: false, 12 | arrowParens: 'always', 13 | rangeStart: 0, 14 | rangeEnd: Infinity, 15 | requirePragma: false, 16 | insertPragma: false, 17 | proseWrap: 'preserve', 18 | htmlWhitespaceSensitivity: 'css', 19 | endOfLine: 'lf', 20 | embeddedLanguageFormatting: 'auto', 21 | overrides: [ 22 | { 23 | files: '*.yml', 24 | options: { 25 | useTabs: true, 26 | tabWidth: 1, 27 | }, 28 | }, 29 | ], 30 | }; 31 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [0.0.2](https://github.com/savager/pnpm-monorepo-boilerplate/compare/v0.0.1...v0.0.2) (2022-03-18) 6 | 7 | ### Features 8 | 9 | - add utils package with example ([eab8855](https://github.com/savager/pnpm-monorepo-boilerplate/commit/eab8855a7a913b3cc7cf45a23b790eb5ca9c6191)) 10 | 11 | ### 0.0.1 (2022-03-18) 12 | 13 | ### Features 14 | 15 | - add nestjs example app dc941f3 16 | - added all basic configurations from personal boilerplate 54f21d0 17 | 18 | # Changelog 19 | -------------------------------------------------------------------------------- /apps/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "backfill -- next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "^12.3.4", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "ui": "workspace:*" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.21.0", 19 | "@types/node": "^18.14.0", 20 | "@types/react": "18.0.28", 21 | "config": "workspace:*", 22 | "eslint": "^8.34.0", 23 | "next-compose-plugins": "^2.2.1", 24 | "next-transpile-modules": "10.0.0", 25 | "tsconfig": "workspace:*", 26 | "typescript": "^4.9.5", 27 | "utils": "workspace:*" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /apps/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --port 3001", 7 | "build": "backfill -- next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "~13.1.6", 13 | "react": "18.2.0", 14 | "react-dom": "18.2.0", 15 | "ui": "workspace:*" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.21.0", 19 | "@types/node": "^18.14.0", 20 | "@types/react": "18.0.28", 21 | "config": "workspace:*", 22 | "eslint": "^8.34.0", 23 | "next-compose-plugins": "^2.2.1", 24 | "next-transpile-modules": "10.0.0", 25 | "sass": "^1.58.3", 26 | "tsconfig": "workspace:*", 27 | "typescript": "^4.9.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /apps/storybook/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeProvider, convert, themes } from '@storybook/theming'; 3 | 4 | export const parameters = { 5 | options: { 6 | // storySortV6: (a, b) => ( 7 | // a[1].kind === b[1].kind 8 | // ? 0 9 | // : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }); 10 | // ), 11 | // storySortV7: (a, b) => ( 12 | // a.title === b.title 13 | // ? 0 14 | // : a.id.localeCompare(b.id, undefined, { numeric: true }); 15 | // ), 16 | storySort: { 17 | order: ['Examples', 'Docs', 'Demo'], 18 | }, 19 | }, 20 | }; 21 | 22 | export const decorators = [ 23 | (StoryFn) => ( 24 | 25 | 26 | 27 | ), 28 | ]; 29 | -------------------------------------------------------------------------------- /.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 | build 15 | 16 | # misc 17 | .DS_Store 18 | Thumbs.db 19 | .env 20 | *.pem 21 | /tmp 22 | /out-tsc 23 | *.tsbuildinfo 24 | 25 | # debug 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | .pnpm-debug.log* 30 | 31 | # local env files 32 | .env.local 33 | .env.development.local 34 | .env.test.local 35 | .env.production.local 36 | 37 | # IDEs and editors 38 | /.idea 39 | .project 40 | .classpath 41 | .c9/ 42 | *.launch 43 | .settings/ 44 | *.sublime-workspace 45 | .husky 46 | 47 | # IDE - VSCode 48 | .vscode/* 49 | !.vscode/settings.json 50 | !.vscode/tasks.json 51 | !.vscode/launch.json 52 | !.vscode/extensions.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PNPM Workspaces Based Typescript Monorepo Boilerplate. 2 | 3 | ### Motivation 4 | 5 | This is my personal monorepo setup with build caching. 6 | 7 | This works while being minimal, and provides fast builds, linting and sane standards. 8 | 9 | ### Repo features 10 | 11 | - pnpm 12 | - typescript 13 | - standard version 14 | - commitlint 15 | - .prettier and eslint config packages. 16 | - build caching with backfill 17 | 18 | ## Apps 19 | 20 | All apps show examples of using shared utils, config, tsconfig, and components from the UI library. 21 | 22 | - docs: Nextjs 12.1 app 23 | - web: example Nextjs 12.1 app 24 | - nestjs: example NestJs backend 25 | - storybook: example Storybook app 26 | 27 | # Packages 28 | 29 | - config: eslint and other repo config 30 | - tsconfig: typescript configurations 31 | - ui: shared UI components 32 | - utils: shared functional utils 33 | 34 | ### Usage 35 | 36 | 1. Delete the packages you do not want to use. 37 | 2. Rename the packages (and all the references to it's name in all packages). 38 | 3. run `pnpm husky install` to use hsuky prettier formatting. 39 | 4. Clear out CHANGELOG.md. 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-2021 Sébastien Vanvelthem 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pnpm-monorepo-boilerplate", 3 | "version": "0.0.2", 4 | "description": "Basic PNPM Typescript Monorepo. Basically Turborepo minus caching with opinionated additions.", 5 | "author": "Russ Savage savage.russel@gmail.com", 6 | "private": true, 7 | "license": "MIT", 8 | "workspaces": [ 9 | "apps/*", 10 | "packages/*" 11 | ], 12 | "scripts": { 13 | "clean": "rimraf \"node_modules\" \"**/node_modules\" \"**/.next\" \"**/dist\" \"**/pnpm-error.log\" \"**/.DS_Store\"", 14 | "fresh": "pnpm clean && pnpm i", 15 | "nuke": "rimraf \"**/pnpm-lock.yaml\" && pnpm fresh", 16 | "build": "pnpm --stream -r run build", 17 | "dev": "pnpm --stream -r run dev", 18 | "lint": "pnpm --stream -r run lint", 19 | "format": "prettier --write \"**/*.{ts,tsx,md}\"", 20 | "release": "pnpm standard-version" 21 | }, 22 | "husky": { 23 | "hooks": { 24 | "pre-commit": "pnpm pretty-quick --staged " 25 | } 26 | }, 27 | "devDependencies": { 28 | "@commitlint/cli": "^16.2.1", 29 | "@commitlint/config-conventional": "^16.2.1", 30 | "backfill": "^6.1.13", 31 | "eslint": "^8.10.0", 32 | "husky": "^7.0.0", 33 | "prettier": "^2.3.2", 34 | "pretty-quick": "^3.1.3", 35 | "rimraf": "^3.0.2", 36 | "standard-version": "^9.3.2", 37 | "typescript": "^4.5.3" 38 | }, 39 | "engines": { 40 | "npm": ">=7.0.0", 41 | "node": ">=14.0.0" 42 | }, 43 | "packageManager": "pnpm@6.32.3" 44 | } 45 | -------------------------------------------------------------------------------- /apps/storybook/src/button.stories.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable storybook/await-interactions */ 2 | /* eslint-disable storybook/use-storybook-testing-library */ 3 | // @TODO: use addon-interactions and remove the rule disable above 4 | import React from 'react'; 5 | import { Meta, ComponentStory } from '@storybook/react'; 6 | import { screen } from '@testing-library/dom'; 7 | import userEvent from '@testing-library/user-event'; 8 | import { Button } from 'ui'; 9 | 10 | export default { 11 | component: Button, 12 | title: 'Examples / Button', 13 | argTypes: { onClick: { action: 'click ' } }, 14 | // render: () => <>hohoho, 15 | } as Meta; 16 | 17 | export const WithArgs: ComponentStory = (args) => 357 | 365 | 366 | 367 | 368 | 369 | `; 370 | 371 | exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = ` 372 | .emotion-15 { 373 | font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; 374 | display: -webkit-box; 375 | display: -webkit-flex; 376 | display: -ms-flexbox; 377 | display: flex; 378 | -webkit-flex-direction: column; 379 | -ms-flex-direction: column; 380 | flex-direction: column; 381 | -webkit-align-items: center; 382 | -webkit-box-align: center; 383 | -ms-flex-align: center; 384 | align-items: center; 385 | width: 450px; 386 | padding: 32px; 387 | background-color: #FFFFFF; 388 | border-radius: 7px; 389 | } 390 | 391 | .emotion-2 { 392 | display: -webkit-box; 393 | display: -webkit-flex; 394 | display: -ms-flexbox; 395 | display: flex; 396 | -webkit-align-items: center; 397 | -webkit-box-align: center; 398 | -ms-flex-align: center; 399 | align-items: center; 400 | -webkit-box-pack: center; 401 | -webkit-justify-content: center; 402 | -ms-flex-pack: center; 403 | justify-content: center; 404 | } 405 | 406 | .emotion-0 { 407 | height: 40px; 408 | z-index: 10; 409 | margin-left: 32px; 410 | } 411 | 412 | .emotion-1 { 413 | height: 40px; 414 | z-index: 1; 415 | left: -32px; 416 | position: relative; 417 | } 418 | 419 | .emotion-3 { 420 | margin-top: 20px; 421 | text-align: center; 422 | } 423 | 424 | .emotion-14 { 425 | display: -webkit-box; 426 | display: -webkit-flex; 427 | display: -ms-flexbox; 428 | display: flex; 429 | -webkit-align-items: flex-start; 430 | -webkit-box-align: flex-start; 431 | -ms-flex-align: flex-start; 432 | align-items: flex-start; 433 | -webkit-box-pack: center; 434 | -webkit-justify-content: center; 435 | -ms-flex-pack: center; 436 | justify-content: center; 437 | width: 350px; 438 | min-height: 189px; 439 | margin-top: 8px; 440 | } 441 | 442 | .emotion-13 { 443 | width: 100%; 444 | -webkit-align-self: flex-start; 445 | -ms-flex-item-align: start; 446 | align-self: flex-start; 447 | } 448 | 449 | .emotion-13[aria-disabled="true"] { 450 | opacity: 0.6; 451 | } 452 | 453 | .emotion-6 { 454 | display: -webkit-box; 455 | display: -webkit-flex; 456 | display: -ms-flexbox; 457 | display: flex; 458 | -webkit-flex-direction: column; 459 | -ms-flex-direction: column; 460 | flex-direction: column; 461 | -webkit-box-pack: stretch; 462 | -webkit-justify-content: stretch; 463 | -ms-flex-pack: stretch; 464 | justify-content: stretch; 465 | margin-bottom: 10px; 466 | } 467 | 468 | .emotion-4 { 469 | font-size: 13px; 470 | font-weight: 500; 471 | margin-bottom: 6px; 472 | } 473 | 474 | .emotion-5 { 475 | font-size: 14px; 476 | color: #333333; 477 | padding: 10px 15px; 478 | border-radius: 4px; 479 | -webkit-appearance: none; 480 | -moz-appearance: none; 481 | appearance: none; 482 | outline: none; 483 | border: 0 none; 484 | box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; 485 | } 486 | 487 | .emotion-5:focus { 488 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 489 | } 490 | 491 | .emotion-5:active { 492 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 493 | } 494 | 495 | .emotion-5[aria-invalid="true"] { 496 | box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; 497 | } 498 | 499 | .emotion-12 { 500 | -webkit-align-self: stretch; 501 | -ms-flex-item-align: stretch; 502 | align-self: stretch; 503 | display: -webkit-box; 504 | display: -webkit-flex; 505 | display: -ms-flexbox; 506 | display: flex; 507 | -webkit-box-pack: justify; 508 | -webkit-justify-content: space-between; 509 | -ms-flex-pack: justify; 510 | justify-content: space-between; 511 | margin-top: 24px; 512 | } 513 | 514 | .emotion-10 { 515 | background-color: transparent; 516 | border: 0 none; 517 | outline: none; 518 | -webkit-appearance: none; 519 | -moz-appearance: none; 520 | appearance: none; 521 | font-weight: 500; 522 | font-size: 12px; 523 | -webkit-flex-basis: 50%; 524 | -ms-flex-preferred-size: 50%; 525 | flex-basis: 50%; 526 | cursor: pointer; 527 | padding: 11px 16px; 528 | border-radius: 4px; 529 | text-transform: uppercase; 530 | margin-right: 8px; 531 | background-color: #1EA7FD; 532 | color: #FFFFFF; 533 | opacity: 0.6; 534 | box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; 535 | } 536 | 537 | .emotion-10:focus { 538 | -webkit-text-decoration: underline; 539 | text-decoration: underline; 540 | font-weight: 700; 541 | } 542 | 543 | .emotion-10:active { 544 | -webkit-text-decoration: underline; 545 | text-decoration: underline; 546 | font-weight: 700; 547 | } 548 | 549 | .emotion-10[aria-disabled="true"] { 550 | cursor: default; 551 | } 552 | 553 | .emotion-11 { 554 | background-color: transparent; 555 | border: 0 none; 556 | outline: none; 557 | -webkit-appearance: none; 558 | -moz-appearance: none; 559 | appearance: none; 560 | font-weight: 500; 561 | font-size: 12px; 562 | -webkit-flex-basis: 50%; 563 | -ms-flex-preferred-size: 50%; 564 | flex-basis: 50%; 565 | cursor: pointer; 566 | padding: 11px 16px; 567 | border-radius: 4px; 568 | text-transform: uppercase; 569 | margin-left: 8px; 570 | box-shadow: rgb(30 167 253) 0 0 0 1px inset; 571 | color: #1EA7FD; 572 | } 573 | 574 | .emotion-11:focus { 575 | -webkit-text-decoration: underline; 576 | text-decoration: underline; 577 | font-weight: 700; 578 | } 579 | 580 | .emotion-11:active { 581 | -webkit-text-decoration: underline; 582 | text-decoration: underline; 583 | font-weight: 700; 584 | } 585 | 586 | .emotion-11[aria-disabled="true"] { 587 | cursor: default; 588 | } 589 | 590 |
593 |
596 | 602 | 603 | Storybook icon 604 | 605 | 612 | 618 | 624 | 629 | 630 | 631 | 637 | 638 | Storybook 639 | 640 | 644 | 648 | 649 | 650 |
651 |

654 | Create an account to join the Storybook community 655 |

656 |
659 |
667 |
670 | 676 | 689 |
690 |
693 | 699 | 712 |
713 |
716 | 725 | 733 |
734 |
735 |
736 |
737 | `; 738 | 739 | exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = ` 740 | .emotion-15 { 741 | font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; 742 | display: -webkit-box; 743 | display: -webkit-flex; 744 | display: -ms-flexbox; 745 | display: flex; 746 | -webkit-flex-direction: column; 747 | -ms-flex-direction: column; 748 | flex-direction: column; 749 | -webkit-align-items: center; 750 | -webkit-box-align: center; 751 | -ms-flex-align: center; 752 | align-items: center; 753 | width: 450px; 754 | padding: 32px; 755 | background-color: #FFFFFF; 756 | border-radius: 7px; 757 | } 758 | 759 | .emotion-2 { 760 | display: -webkit-box; 761 | display: -webkit-flex; 762 | display: -ms-flexbox; 763 | display: flex; 764 | -webkit-align-items: center; 765 | -webkit-box-align: center; 766 | -ms-flex-align: center; 767 | align-items: center; 768 | -webkit-box-pack: center; 769 | -webkit-justify-content: center; 770 | -ms-flex-pack: center; 771 | justify-content: center; 772 | } 773 | 774 | .emotion-0 { 775 | height: 40px; 776 | z-index: 10; 777 | margin-left: 32px; 778 | } 779 | 780 | .emotion-1 { 781 | height: 40px; 782 | z-index: 1; 783 | left: -32px; 784 | position: relative; 785 | } 786 | 787 | .emotion-3 { 788 | margin-top: 20px; 789 | text-align: center; 790 | } 791 | 792 | .emotion-14 { 793 | display: -webkit-box; 794 | display: -webkit-flex; 795 | display: -ms-flexbox; 796 | display: flex; 797 | -webkit-align-items: flex-start; 798 | -webkit-box-align: flex-start; 799 | -ms-flex-align: flex-start; 800 | align-items: flex-start; 801 | -webkit-box-pack: center; 802 | -webkit-justify-content: center; 803 | -ms-flex-pack: center; 804 | justify-content: center; 805 | width: 350px; 806 | min-height: 189px; 807 | margin-top: 8px; 808 | } 809 | 810 | .emotion-13 { 811 | width: 100%; 812 | -webkit-align-self: flex-start; 813 | -ms-flex-item-align: start; 814 | align-self: flex-start; 815 | } 816 | 817 | .emotion-13[aria-disabled="true"] { 818 | opacity: 0.6; 819 | } 820 | 821 | .emotion-6 { 822 | display: -webkit-box; 823 | display: -webkit-flex; 824 | display: -ms-flexbox; 825 | display: flex; 826 | -webkit-flex-direction: column; 827 | -ms-flex-direction: column; 828 | flex-direction: column; 829 | -webkit-box-pack: stretch; 830 | -webkit-justify-content: stretch; 831 | -ms-flex-pack: stretch; 832 | justify-content: stretch; 833 | margin-bottom: 10px; 834 | } 835 | 836 | .emotion-4 { 837 | font-size: 13px; 838 | font-weight: 500; 839 | margin-bottom: 6px; 840 | } 841 | 842 | .emotion-5 { 843 | font-size: 14px; 844 | color: #333333; 845 | padding: 10px 15px; 846 | border-radius: 4px; 847 | -webkit-appearance: none; 848 | -moz-appearance: none; 849 | appearance: none; 850 | outline: none; 851 | border: 0 none; 852 | box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; 853 | } 854 | 855 | .emotion-5:focus { 856 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 857 | } 858 | 859 | .emotion-5:active { 860 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 861 | } 862 | 863 | .emotion-5[aria-invalid="true"] { 864 | box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; 865 | } 866 | 867 | .emotion-12 { 868 | -webkit-align-self: stretch; 869 | -ms-flex-item-align: stretch; 870 | align-self: stretch; 871 | display: -webkit-box; 872 | display: -webkit-flex; 873 | display: -ms-flexbox; 874 | display: flex; 875 | -webkit-box-pack: justify; 876 | -webkit-justify-content: space-between; 877 | -ms-flex-pack: justify; 878 | justify-content: space-between; 879 | margin-top: 24px; 880 | } 881 | 882 | .emotion-10 { 883 | background-color: transparent; 884 | border: 0 none; 885 | outline: none; 886 | -webkit-appearance: none; 887 | -moz-appearance: none; 888 | appearance: none; 889 | font-weight: 500; 890 | font-size: 12px; 891 | -webkit-flex-basis: 50%; 892 | -ms-flex-preferred-size: 50%; 893 | flex-basis: 50%; 894 | cursor: pointer; 895 | padding: 11px 16px; 896 | border-radius: 4px; 897 | text-transform: uppercase; 898 | margin-right: 8px; 899 | background-color: #1EA7FD; 900 | color: #FFFFFF; 901 | opacity: 0.6; 902 | box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; 903 | } 904 | 905 | .emotion-10:focus { 906 | -webkit-text-decoration: underline; 907 | text-decoration: underline; 908 | font-weight: 700; 909 | } 910 | 911 | .emotion-10:active { 912 | -webkit-text-decoration: underline; 913 | text-decoration: underline; 914 | font-weight: 700; 915 | } 916 | 917 | .emotion-10[aria-disabled="true"] { 918 | cursor: default; 919 | } 920 | 921 | .emotion-11 { 922 | background-color: transparent; 923 | border: 0 none; 924 | outline: none; 925 | -webkit-appearance: none; 926 | -moz-appearance: none; 927 | appearance: none; 928 | font-weight: 500; 929 | font-size: 12px; 930 | -webkit-flex-basis: 50%; 931 | -ms-flex-preferred-size: 50%; 932 | flex-basis: 50%; 933 | cursor: pointer; 934 | padding: 11px 16px; 935 | border-radius: 4px; 936 | text-transform: uppercase; 937 | margin-left: 8px; 938 | box-shadow: rgb(30 167 253) 0 0 0 1px inset; 939 | color: #1EA7FD; 940 | } 941 | 942 | .emotion-11:focus { 943 | -webkit-text-decoration: underline; 944 | text-decoration: underline; 945 | font-weight: 700; 946 | } 947 | 948 | .emotion-11:active { 949 | -webkit-text-decoration: underline; 950 | text-decoration: underline; 951 | font-weight: 700; 952 | } 953 | 954 | .emotion-11[aria-disabled="true"] { 955 | cursor: default; 956 | } 957 | 958 |
961 |
964 | 970 | 971 | Storybook icon 972 | 973 | 980 | 986 | 992 | 997 | 998 | 999 | 1005 | 1006 | Storybook 1007 | 1008 | 1012 | 1016 | 1017 | 1018 |
1019 |

1022 | Create an account to join the Storybook community 1023 |

1024 |
1027 |
1035 |
1038 | 1044 | 1057 |
1058 |
1061 | 1067 | 1080 |
1081 |
1084 | 1093 | 1101 |
1102 |
1103 |
1104 |
1105 | `; 1106 | 1107 | exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = ` 1108 | .emotion-15 { 1109 | font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; 1110 | display: -webkit-box; 1111 | display: -webkit-flex; 1112 | display: -ms-flexbox; 1113 | display: flex; 1114 | -webkit-flex-direction: column; 1115 | -ms-flex-direction: column; 1116 | flex-direction: column; 1117 | -webkit-align-items: center; 1118 | -webkit-box-align: center; 1119 | -ms-flex-align: center; 1120 | align-items: center; 1121 | width: 450px; 1122 | padding: 32px; 1123 | background-color: #FFFFFF; 1124 | border-radius: 7px; 1125 | } 1126 | 1127 | .emotion-2 { 1128 | display: -webkit-box; 1129 | display: -webkit-flex; 1130 | display: -ms-flexbox; 1131 | display: flex; 1132 | -webkit-align-items: center; 1133 | -webkit-box-align: center; 1134 | -ms-flex-align: center; 1135 | align-items: center; 1136 | -webkit-box-pack: center; 1137 | -webkit-justify-content: center; 1138 | -ms-flex-pack: center; 1139 | justify-content: center; 1140 | } 1141 | 1142 | .emotion-0 { 1143 | height: 40px; 1144 | z-index: 10; 1145 | margin-left: 32px; 1146 | } 1147 | 1148 | .emotion-1 { 1149 | height: 40px; 1150 | z-index: 1; 1151 | left: -32px; 1152 | position: relative; 1153 | } 1154 | 1155 | .emotion-3 { 1156 | margin-top: 20px; 1157 | text-align: center; 1158 | } 1159 | 1160 | .emotion-14 { 1161 | display: -webkit-box; 1162 | display: -webkit-flex; 1163 | display: -ms-flexbox; 1164 | display: flex; 1165 | -webkit-align-items: flex-start; 1166 | -webkit-box-align: flex-start; 1167 | -ms-flex-align: flex-start; 1168 | align-items: flex-start; 1169 | -webkit-box-pack: center; 1170 | -webkit-justify-content: center; 1171 | -ms-flex-pack: center; 1172 | justify-content: center; 1173 | width: 350px; 1174 | min-height: 189px; 1175 | margin-top: 8px; 1176 | } 1177 | 1178 | .emotion-13 { 1179 | width: 100%; 1180 | -webkit-align-self: flex-start; 1181 | -ms-flex-item-align: start; 1182 | align-self: flex-start; 1183 | } 1184 | 1185 | .emotion-13[aria-disabled="true"] { 1186 | opacity: 0.6; 1187 | } 1188 | 1189 | .emotion-6 { 1190 | display: -webkit-box; 1191 | display: -webkit-flex; 1192 | display: -ms-flexbox; 1193 | display: flex; 1194 | -webkit-flex-direction: column; 1195 | -ms-flex-direction: column; 1196 | flex-direction: column; 1197 | -webkit-box-pack: stretch; 1198 | -webkit-justify-content: stretch; 1199 | -ms-flex-pack: stretch; 1200 | justify-content: stretch; 1201 | margin-bottom: 10px; 1202 | } 1203 | 1204 | .emotion-4 { 1205 | font-size: 13px; 1206 | font-weight: 500; 1207 | margin-bottom: 6px; 1208 | } 1209 | 1210 | .emotion-5 { 1211 | font-size: 14px; 1212 | color: #333333; 1213 | padding: 10px 15px; 1214 | border-radius: 4px; 1215 | -webkit-appearance: none; 1216 | -moz-appearance: none; 1217 | appearance: none; 1218 | outline: none; 1219 | border: 0 none; 1220 | box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; 1221 | } 1222 | 1223 | .emotion-5:focus { 1224 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 1225 | } 1226 | 1227 | .emotion-5:active { 1228 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 1229 | } 1230 | 1231 | .emotion-5[aria-invalid="true"] { 1232 | box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; 1233 | } 1234 | 1235 | .emotion-12 { 1236 | -webkit-align-self: stretch; 1237 | -ms-flex-item-align: stretch; 1238 | align-self: stretch; 1239 | display: -webkit-box; 1240 | display: -webkit-flex; 1241 | display: -ms-flexbox; 1242 | display: flex; 1243 | -webkit-box-pack: justify; 1244 | -webkit-justify-content: space-between; 1245 | -ms-flex-pack: justify; 1246 | justify-content: space-between; 1247 | margin-top: 24px; 1248 | } 1249 | 1250 | .emotion-10 { 1251 | background-color: transparent; 1252 | border: 0 none; 1253 | outline: none; 1254 | -webkit-appearance: none; 1255 | -moz-appearance: none; 1256 | appearance: none; 1257 | font-weight: 500; 1258 | font-size: 12px; 1259 | -webkit-flex-basis: 50%; 1260 | -ms-flex-preferred-size: 50%; 1261 | flex-basis: 50%; 1262 | cursor: pointer; 1263 | padding: 11px 16px; 1264 | border-radius: 4px; 1265 | text-transform: uppercase; 1266 | margin-right: 8px; 1267 | background-color: #1EA7FD; 1268 | color: #FFFFFF; 1269 | opacity: 0.6; 1270 | box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; 1271 | } 1272 | 1273 | .emotion-10:focus { 1274 | -webkit-text-decoration: underline; 1275 | text-decoration: underline; 1276 | font-weight: 700; 1277 | } 1278 | 1279 | .emotion-10:active { 1280 | -webkit-text-decoration: underline; 1281 | text-decoration: underline; 1282 | font-weight: 700; 1283 | } 1284 | 1285 | .emotion-10[aria-disabled="true"] { 1286 | cursor: default; 1287 | } 1288 | 1289 | .emotion-11 { 1290 | background-color: transparent; 1291 | border: 0 none; 1292 | outline: none; 1293 | -webkit-appearance: none; 1294 | -moz-appearance: none; 1295 | appearance: none; 1296 | font-weight: 500; 1297 | font-size: 12px; 1298 | -webkit-flex-basis: 50%; 1299 | -ms-flex-preferred-size: 50%; 1300 | flex-basis: 50%; 1301 | cursor: pointer; 1302 | padding: 11px 16px; 1303 | border-radius: 4px; 1304 | text-transform: uppercase; 1305 | margin-left: 8px; 1306 | box-shadow: rgb(30 167 253) 0 0 0 1px inset; 1307 | color: #1EA7FD; 1308 | } 1309 | 1310 | .emotion-11:focus { 1311 | -webkit-text-decoration: underline; 1312 | text-decoration: underline; 1313 | font-weight: 700; 1314 | } 1315 | 1316 | .emotion-11:active { 1317 | -webkit-text-decoration: underline; 1318 | text-decoration: underline; 1319 | font-weight: 700; 1320 | } 1321 | 1322 | .emotion-11[aria-disabled="true"] { 1323 | cursor: default; 1324 | } 1325 | 1326 |
1329 |
1332 | 1338 | 1339 | Storybook icon 1340 | 1341 | 1348 | 1354 | 1360 | 1365 | 1366 | 1367 | 1373 | 1374 | Storybook 1375 | 1376 | 1380 | 1384 | 1385 | 1386 |
1387 |

1390 | Create an account to join the Storybook community 1391 |

1392 |
1395 |
1403 |
1406 | 1412 | 1425 |
1426 |
1429 | 1435 | 1448 |
1449 |
1452 | 1461 | 1469 |
1470 |
1471 |
1472 |
1473 | `; 1474 | 1475 | exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = ` 1476 | .emotion-15 { 1477 | font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; 1478 | display: -webkit-box; 1479 | display: -webkit-flex; 1480 | display: -ms-flexbox; 1481 | display: flex; 1482 | -webkit-flex-direction: column; 1483 | -ms-flex-direction: column; 1484 | flex-direction: column; 1485 | -webkit-align-items: center; 1486 | -webkit-box-align: center; 1487 | -ms-flex-align: center; 1488 | align-items: center; 1489 | width: 450px; 1490 | padding: 32px; 1491 | background-color: #FFFFFF; 1492 | border-radius: 7px; 1493 | } 1494 | 1495 | .emotion-2 { 1496 | display: -webkit-box; 1497 | display: -webkit-flex; 1498 | display: -ms-flexbox; 1499 | display: flex; 1500 | -webkit-align-items: center; 1501 | -webkit-box-align: center; 1502 | -ms-flex-align: center; 1503 | align-items: center; 1504 | -webkit-box-pack: center; 1505 | -webkit-justify-content: center; 1506 | -ms-flex-pack: center; 1507 | justify-content: center; 1508 | } 1509 | 1510 | .emotion-0 { 1511 | height: 40px; 1512 | z-index: 10; 1513 | margin-left: 32px; 1514 | } 1515 | 1516 | .emotion-1 { 1517 | height: 40px; 1518 | z-index: 1; 1519 | left: -32px; 1520 | position: relative; 1521 | } 1522 | 1523 | .emotion-3 { 1524 | margin-top: 20px; 1525 | text-align: center; 1526 | } 1527 | 1528 | .emotion-14 { 1529 | display: -webkit-box; 1530 | display: -webkit-flex; 1531 | display: -ms-flexbox; 1532 | display: flex; 1533 | -webkit-align-items: flex-start; 1534 | -webkit-box-align: flex-start; 1535 | -ms-flex-align: flex-start; 1536 | align-items: flex-start; 1537 | -webkit-box-pack: center; 1538 | -webkit-justify-content: center; 1539 | -ms-flex-pack: center; 1540 | justify-content: center; 1541 | width: 350px; 1542 | min-height: 189px; 1543 | margin-top: 8px; 1544 | } 1545 | 1546 | .emotion-13 { 1547 | width: 100%; 1548 | -webkit-align-self: flex-start; 1549 | -ms-flex-item-align: start; 1550 | align-self: flex-start; 1551 | } 1552 | 1553 | .emotion-13[aria-disabled="true"] { 1554 | opacity: 0.6; 1555 | } 1556 | 1557 | .emotion-6 { 1558 | display: -webkit-box; 1559 | display: -webkit-flex; 1560 | display: -ms-flexbox; 1561 | display: flex; 1562 | -webkit-flex-direction: column; 1563 | -ms-flex-direction: column; 1564 | flex-direction: column; 1565 | -webkit-box-pack: stretch; 1566 | -webkit-justify-content: stretch; 1567 | -ms-flex-pack: stretch; 1568 | justify-content: stretch; 1569 | margin-bottom: 10px; 1570 | } 1571 | 1572 | .emotion-4 { 1573 | font-size: 13px; 1574 | font-weight: 500; 1575 | margin-bottom: 6px; 1576 | } 1577 | 1578 | .emotion-5 { 1579 | font-size: 14px; 1580 | color: #333333; 1581 | padding: 10px 15px; 1582 | border-radius: 4px; 1583 | -webkit-appearance: none; 1584 | -moz-appearance: none; 1585 | appearance: none; 1586 | outline: none; 1587 | border: 0 none; 1588 | box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; 1589 | } 1590 | 1591 | .emotion-5:focus { 1592 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 1593 | } 1594 | 1595 | .emotion-5:active { 1596 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 1597 | } 1598 | 1599 | .emotion-5[aria-invalid="true"] { 1600 | box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; 1601 | } 1602 | 1603 | .emotion-12 { 1604 | -webkit-align-self: stretch; 1605 | -ms-flex-item-align: stretch; 1606 | align-self: stretch; 1607 | display: -webkit-box; 1608 | display: -webkit-flex; 1609 | display: -ms-flexbox; 1610 | display: flex; 1611 | -webkit-box-pack: justify; 1612 | -webkit-justify-content: space-between; 1613 | -ms-flex-pack: justify; 1614 | justify-content: space-between; 1615 | margin-top: 24px; 1616 | } 1617 | 1618 | .emotion-10 { 1619 | background-color: transparent; 1620 | border: 0 none; 1621 | outline: none; 1622 | -webkit-appearance: none; 1623 | -moz-appearance: none; 1624 | appearance: none; 1625 | font-weight: 500; 1626 | font-size: 12px; 1627 | -webkit-flex-basis: 50%; 1628 | -ms-flex-preferred-size: 50%; 1629 | flex-basis: 50%; 1630 | cursor: pointer; 1631 | padding: 11px 16px; 1632 | border-radius: 4px; 1633 | text-transform: uppercase; 1634 | margin-right: 8px; 1635 | background-color: #1EA7FD; 1636 | color: #FFFFFF; 1637 | opacity: 0.6; 1638 | box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; 1639 | } 1640 | 1641 | .emotion-10:focus { 1642 | -webkit-text-decoration: underline; 1643 | text-decoration: underline; 1644 | font-weight: 700; 1645 | } 1646 | 1647 | .emotion-10:active { 1648 | -webkit-text-decoration: underline; 1649 | text-decoration: underline; 1650 | font-weight: 700; 1651 | } 1652 | 1653 | .emotion-10[aria-disabled="true"] { 1654 | cursor: default; 1655 | } 1656 | 1657 | .emotion-11 { 1658 | background-color: transparent; 1659 | border: 0 none; 1660 | outline: none; 1661 | -webkit-appearance: none; 1662 | -moz-appearance: none; 1663 | appearance: none; 1664 | font-weight: 500; 1665 | font-size: 12px; 1666 | -webkit-flex-basis: 50%; 1667 | -ms-flex-preferred-size: 50%; 1668 | flex-basis: 50%; 1669 | cursor: pointer; 1670 | padding: 11px 16px; 1671 | border-radius: 4px; 1672 | text-transform: uppercase; 1673 | margin-left: 8px; 1674 | box-shadow: rgb(30 167 253) 0 0 0 1px inset; 1675 | color: #1EA7FD; 1676 | } 1677 | 1678 | .emotion-11:focus { 1679 | -webkit-text-decoration: underline; 1680 | text-decoration: underline; 1681 | font-weight: 700; 1682 | } 1683 | 1684 | .emotion-11:active { 1685 | -webkit-text-decoration: underline; 1686 | text-decoration: underline; 1687 | font-weight: 700; 1688 | } 1689 | 1690 | .emotion-11[aria-disabled="true"] { 1691 | cursor: default; 1692 | } 1693 | 1694 |
1697 |
1700 | 1706 | 1707 | Storybook icon 1708 | 1709 | 1716 | 1722 | 1728 | 1733 | 1734 | 1735 | 1741 | 1742 | Storybook 1743 | 1744 | 1748 | 1752 | 1753 | 1754 |
1755 |

1758 | Create an account to join the Storybook community 1759 |

1760 |
1763 |
1771 |
1774 | 1780 | 1793 |
1794 |
1797 | 1803 | 1816 |
1817 |
1820 | 1829 | 1837 |
1838 |
1839 |
1840 |
1841 | `; 1842 | 1843 | exports[`Storyshots Demo/AccountForm Verification 1`] = ` 1844 | .emotion-18 { 1845 | font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; 1846 | display: -webkit-box; 1847 | display: -webkit-flex; 1848 | display: -ms-flexbox; 1849 | display: flex; 1850 | -webkit-flex-direction: column; 1851 | -ms-flex-direction: column; 1852 | flex-direction: column; 1853 | -webkit-align-items: center; 1854 | -webkit-box-align: center; 1855 | -ms-flex-align: center; 1856 | align-items: center; 1857 | width: 450px; 1858 | padding: 32px; 1859 | background-color: #FFFFFF; 1860 | border-radius: 7px; 1861 | } 1862 | 1863 | .emotion-2 { 1864 | display: -webkit-box; 1865 | display: -webkit-flex; 1866 | display: -ms-flexbox; 1867 | display: flex; 1868 | -webkit-align-items: center; 1869 | -webkit-box-align: center; 1870 | -ms-flex-align: center; 1871 | align-items: center; 1872 | -webkit-box-pack: center; 1873 | -webkit-justify-content: center; 1874 | -ms-flex-pack: center; 1875 | justify-content: center; 1876 | } 1877 | 1878 | .emotion-0 { 1879 | height: 40px; 1880 | z-index: 10; 1881 | margin-left: 32px; 1882 | } 1883 | 1884 | .emotion-1 { 1885 | height: 40px; 1886 | z-index: 1; 1887 | left: -32px; 1888 | position: relative; 1889 | } 1890 | 1891 | .emotion-3 { 1892 | margin-top: 20px; 1893 | text-align: center; 1894 | } 1895 | 1896 | .emotion-17 { 1897 | display: -webkit-box; 1898 | display: -webkit-flex; 1899 | display: -ms-flexbox; 1900 | display: flex; 1901 | -webkit-align-items: flex-start; 1902 | -webkit-box-align: flex-start; 1903 | -ms-flex-align: flex-start; 1904 | align-items: flex-start; 1905 | -webkit-box-pack: center; 1906 | -webkit-justify-content: center; 1907 | -ms-flex-pack: center; 1908 | justify-content: center; 1909 | width: 350px; 1910 | min-height: 189px; 1911 | margin-top: 8px; 1912 | } 1913 | 1914 | .emotion-16 { 1915 | width: 100%; 1916 | -webkit-align-self: flex-start; 1917 | -ms-flex-item-align: start; 1918 | align-self: flex-start; 1919 | } 1920 | 1921 | .emotion-16[aria-disabled="true"] { 1922 | opacity: 0.6; 1923 | } 1924 | 1925 | .emotion-6 { 1926 | display: -webkit-box; 1927 | display: -webkit-flex; 1928 | display: -ms-flexbox; 1929 | display: flex; 1930 | -webkit-flex-direction: column; 1931 | -ms-flex-direction: column; 1932 | flex-direction: column; 1933 | -webkit-box-pack: stretch; 1934 | -webkit-justify-content: stretch; 1935 | -ms-flex-pack: stretch; 1936 | justify-content: stretch; 1937 | margin-bottom: 10px; 1938 | } 1939 | 1940 | .emotion-4 { 1941 | font-size: 13px; 1942 | font-weight: 500; 1943 | margin-bottom: 6px; 1944 | } 1945 | 1946 | .emotion-5 { 1947 | font-size: 14px; 1948 | color: #333333; 1949 | padding: 10px 15px; 1950 | border-radius: 4px; 1951 | -webkit-appearance: none; 1952 | -moz-appearance: none; 1953 | appearance: none; 1954 | outline: none; 1955 | border: 0 none; 1956 | box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; 1957 | } 1958 | 1959 | .emotion-5:focus { 1960 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 1961 | } 1962 | 1963 | .emotion-5:active { 1964 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 1965 | } 1966 | 1967 | .emotion-5[aria-invalid="true"] { 1968 | box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; 1969 | } 1970 | 1971 | .emotion-15 { 1972 | -webkit-align-self: stretch; 1973 | -ms-flex-item-align: stretch; 1974 | align-self: stretch; 1975 | display: -webkit-box; 1976 | display: -webkit-flex; 1977 | display: -ms-flexbox; 1978 | display: flex; 1979 | -webkit-box-pack: justify; 1980 | -webkit-justify-content: space-between; 1981 | -ms-flex-pack: justify; 1982 | justify-content: space-between; 1983 | margin-top: 24px; 1984 | } 1985 | 1986 | .emotion-13 { 1987 | background-color: transparent; 1988 | border: 0 none; 1989 | outline: none; 1990 | -webkit-appearance: none; 1991 | -moz-appearance: none; 1992 | appearance: none; 1993 | font-weight: 500; 1994 | font-size: 12px; 1995 | -webkit-flex-basis: 50%; 1996 | -ms-flex-preferred-size: 50%; 1997 | flex-basis: 50%; 1998 | cursor: pointer; 1999 | padding: 11px 16px; 2000 | border-radius: 4px; 2001 | text-transform: uppercase; 2002 | margin-right: 8px; 2003 | background-color: #1EA7FD; 2004 | color: #FFFFFF; 2005 | opacity: 0.6; 2006 | box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; 2007 | } 2008 | 2009 | .emotion-13:focus { 2010 | -webkit-text-decoration: underline; 2011 | text-decoration: underline; 2012 | font-weight: 700; 2013 | } 2014 | 2015 | .emotion-13:active { 2016 | -webkit-text-decoration: underline; 2017 | text-decoration: underline; 2018 | font-weight: 700; 2019 | } 2020 | 2021 | .emotion-13[aria-disabled="true"] { 2022 | cursor: default; 2023 | } 2024 | 2025 | .emotion-14 { 2026 | background-color: transparent; 2027 | border: 0 none; 2028 | outline: none; 2029 | -webkit-appearance: none; 2030 | -moz-appearance: none; 2031 | appearance: none; 2032 | font-weight: 500; 2033 | font-size: 12px; 2034 | -webkit-flex-basis: 50%; 2035 | -ms-flex-preferred-size: 50%; 2036 | flex-basis: 50%; 2037 | cursor: pointer; 2038 | padding: 11px 16px; 2039 | border-radius: 4px; 2040 | text-transform: uppercase; 2041 | margin-left: 8px; 2042 | box-shadow: rgb(30 167 253) 0 0 0 1px inset; 2043 | color: #1EA7FD; 2044 | } 2045 | 2046 | .emotion-14:focus { 2047 | -webkit-text-decoration: underline; 2048 | text-decoration: underline; 2049 | font-weight: 700; 2050 | } 2051 | 2052 | .emotion-14:active { 2053 | -webkit-text-decoration: underline; 2054 | text-decoration: underline; 2055 | font-weight: 700; 2056 | } 2057 | 2058 | .emotion-14[aria-disabled="true"] { 2059 | cursor: default; 2060 | } 2061 | 2062 |
2065 |
2068 | 2074 | 2075 | Storybook icon 2076 | 2077 | 2084 | 2090 | 2096 | 2101 | 2102 | 2103 | 2109 | 2110 | Storybook 2111 | 2112 | 2116 | 2120 | 2121 | 2122 |
2123 |

2126 | Create an account to join the Storybook community 2127 |

2128 |
2131 |
2139 |
2142 | 2148 | 2161 |
2162 |
2165 | 2171 | 2184 |
2185 |
2188 | 2194 | 2207 |
2208 |
2211 | 2220 | 2228 |
2229 |
2230 |
2231 |
2232 | `; 2233 | 2234 | exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = ` 2235 | .emotion-18 { 2236 | font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; 2237 | display: -webkit-box; 2238 | display: -webkit-flex; 2239 | display: -ms-flexbox; 2240 | display: flex; 2241 | -webkit-flex-direction: column; 2242 | -ms-flex-direction: column; 2243 | flex-direction: column; 2244 | -webkit-align-items: center; 2245 | -webkit-box-align: center; 2246 | -ms-flex-align: center; 2247 | align-items: center; 2248 | width: 450px; 2249 | padding: 32px; 2250 | background-color: #FFFFFF; 2251 | border-radius: 7px; 2252 | } 2253 | 2254 | .emotion-2 { 2255 | display: -webkit-box; 2256 | display: -webkit-flex; 2257 | display: -ms-flexbox; 2258 | display: flex; 2259 | -webkit-align-items: center; 2260 | -webkit-box-align: center; 2261 | -ms-flex-align: center; 2262 | align-items: center; 2263 | -webkit-box-pack: center; 2264 | -webkit-justify-content: center; 2265 | -ms-flex-pack: center; 2266 | justify-content: center; 2267 | } 2268 | 2269 | .emotion-0 { 2270 | height: 40px; 2271 | z-index: 10; 2272 | margin-left: 32px; 2273 | } 2274 | 2275 | .emotion-1 { 2276 | height: 40px; 2277 | z-index: 1; 2278 | left: -32px; 2279 | position: relative; 2280 | } 2281 | 2282 | .emotion-3 { 2283 | margin-top: 20px; 2284 | text-align: center; 2285 | } 2286 | 2287 | .emotion-17 { 2288 | display: -webkit-box; 2289 | display: -webkit-flex; 2290 | display: -ms-flexbox; 2291 | display: flex; 2292 | -webkit-align-items: flex-start; 2293 | -webkit-box-align: flex-start; 2294 | -ms-flex-align: flex-start; 2295 | align-items: flex-start; 2296 | -webkit-box-pack: center; 2297 | -webkit-justify-content: center; 2298 | -ms-flex-pack: center; 2299 | justify-content: center; 2300 | width: 350px; 2301 | min-height: 189px; 2302 | margin-top: 8px; 2303 | } 2304 | 2305 | .emotion-16 { 2306 | width: 100%; 2307 | -webkit-align-self: flex-start; 2308 | -ms-flex-item-align: start; 2309 | align-self: flex-start; 2310 | } 2311 | 2312 | .emotion-16[aria-disabled="true"] { 2313 | opacity: 0.6; 2314 | } 2315 | 2316 | .emotion-6 { 2317 | display: -webkit-box; 2318 | display: -webkit-flex; 2319 | display: -ms-flexbox; 2320 | display: flex; 2321 | -webkit-flex-direction: column; 2322 | -ms-flex-direction: column; 2323 | flex-direction: column; 2324 | -webkit-box-pack: stretch; 2325 | -webkit-justify-content: stretch; 2326 | -ms-flex-pack: stretch; 2327 | justify-content: stretch; 2328 | margin-bottom: 10px; 2329 | } 2330 | 2331 | .emotion-4 { 2332 | font-size: 13px; 2333 | font-weight: 500; 2334 | margin-bottom: 6px; 2335 | } 2336 | 2337 | .emotion-5 { 2338 | font-size: 14px; 2339 | color: #333333; 2340 | padding: 10px 15px; 2341 | border-radius: 4px; 2342 | -webkit-appearance: none; 2343 | -moz-appearance: none; 2344 | appearance: none; 2345 | outline: none; 2346 | border: 0 none; 2347 | box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; 2348 | } 2349 | 2350 | .emotion-5:focus { 2351 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 2352 | } 2353 | 2354 | .emotion-5:active { 2355 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 2356 | } 2357 | 2358 | .emotion-5[aria-invalid="true"] { 2359 | box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; 2360 | } 2361 | 2362 | .emotion-15 { 2363 | -webkit-align-self: stretch; 2364 | -ms-flex-item-align: stretch; 2365 | align-self: stretch; 2366 | display: -webkit-box; 2367 | display: -webkit-flex; 2368 | display: -ms-flexbox; 2369 | display: flex; 2370 | -webkit-box-pack: justify; 2371 | -webkit-justify-content: space-between; 2372 | -ms-flex-pack: justify; 2373 | justify-content: space-between; 2374 | margin-top: 24px; 2375 | } 2376 | 2377 | .emotion-13 { 2378 | background-color: transparent; 2379 | border: 0 none; 2380 | outline: none; 2381 | -webkit-appearance: none; 2382 | -moz-appearance: none; 2383 | appearance: none; 2384 | font-weight: 500; 2385 | font-size: 12px; 2386 | -webkit-flex-basis: 50%; 2387 | -ms-flex-preferred-size: 50%; 2388 | flex-basis: 50%; 2389 | cursor: pointer; 2390 | padding: 11px 16px; 2391 | border-radius: 4px; 2392 | text-transform: uppercase; 2393 | margin-right: 8px; 2394 | background-color: #1EA7FD; 2395 | color: #FFFFFF; 2396 | opacity: 0.6; 2397 | box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; 2398 | } 2399 | 2400 | .emotion-13:focus { 2401 | -webkit-text-decoration: underline; 2402 | text-decoration: underline; 2403 | font-weight: 700; 2404 | } 2405 | 2406 | .emotion-13:active { 2407 | -webkit-text-decoration: underline; 2408 | text-decoration: underline; 2409 | font-weight: 700; 2410 | } 2411 | 2412 | .emotion-13[aria-disabled="true"] { 2413 | cursor: default; 2414 | } 2415 | 2416 | .emotion-14 { 2417 | background-color: transparent; 2418 | border: 0 none; 2419 | outline: none; 2420 | -webkit-appearance: none; 2421 | -moz-appearance: none; 2422 | appearance: none; 2423 | font-weight: 500; 2424 | font-size: 12px; 2425 | -webkit-flex-basis: 50%; 2426 | -ms-flex-preferred-size: 50%; 2427 | flex-basis: 50%; 2428 | cursor: pointer; 2429 | padding: 11px 16px; 2430 | border-radius: 4px; 2431 | text-transform: uppercase; 2432 | margin-left: 8px; 2433 | box-shadow: rgb(30 167 253) 0 0 0 1px inset; 2434 | color: #1EA7FD; 2435 | } 2436 | 2437 | .emotion-14:focus { 2438 | -webkit-text-decoration: underline; 2439 | text-decoration: underline; 2440 | font-weight: 700; 2441 | } 2442 | 2443 | .emotion-14:active { 2444 | -webkit-text-decoration: underline; 2445 | text-decoration: underline; 2446 | font-weight: 700; 2447 | } 2448 | 2449 | .emotion-14[aria-disabled="true"] { 2450 | cursor: default; 2451 | } 2452 | 2453 |
2456 |
2459 | 2465 | 2466 | Storybook icon 2467 | 2468 | 2475 | 2481 | 2487 | 2492 | 2493 | 2494 | 2500 | 2501 | Storybook 2502 | 2503 | 2507 | 2511 | 2512 | 2513 |
2514 |

2517 | Create an account to join the Storybook community 2518 |

2519 |
2522 |
2530 |
2533 | 2539 | 2552 |
2553 |
2556 | 2562 | 2575 |
2576 |
2579 | 2585 | 2598 |
2599 |
2602 | 2611 | 2619 |
2620 |
2621 |
2622 |
2623 | `; 2624 | 2625 | exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = ` 2626 | .emotion-18 { 2627 | font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; 2628 | display: -webkit-box; 2629 | display: -webkit-flex; 2630 | display: -ms-flexbox; 2631 | display: flex; 2632 | -webkit-flex-direction: column; 2633 | -ms-flex-direction: column; 2634 | flex-direction: column; 2635 | -webkit-align-items: center; 2636 | -webkit-box-align: center; 2637 | -ms-flex-align: center; 2638 | align-items: center; 2639 | width: 450px; 2640 | padding: 32px; 2641 | background-color: #FFFFFF; 2642 | border-radius: 7px; 2643 | } 2644 | 2645 | .emotion-2 { 2646 | display: -webkit-box; 2647 | display: -webkit-flex; 2648 | display: -ms-flexbox; 2649 | display: flex; 2650 | -webkit-align-items: center; 2651 | -webkit-box-align: center; 2652 | -ms-flex-align: center; 2653 | align-items: center; 2654 | -webkit-box-pack: center; 2655 | -webkit-justify-content: center; 2656 | -ms-flex-pack: center; 2657 | justify-content: center; 2658 | } 2659 | 2660 | .emotion-0 { 2661 | height: 40px; 2662 | z-index: 10; 2663 | margin-left: 32px; 2664 | } 2665 | 2666 | .emotion-1 { 2667 | height: 40px; 2668 | z-index: 1; 2669 | left: -32px; 2670 | position: relative; 2671 | } 2672 | 2673 | .emotion-3 { 2674 | margin-top: 20px; 2675 | text-align: center; 2676 | } 2677 | 2678 | .emotion-17 { 2679 | display: -webkit-box; 2680 | display: -webkit-flex; 2681 | display: -ms-flexbox; 2682 | display: flex; 2683 | -webkit-align-items: flex-start; 2684 | -webkit-box-align: flex-start; 2685 | -ms-flex-align: flex-start; 2686 | align-items: flex-start; 2687 | -webkit-box-pack: center; 2688 | -webkit-justify-content: center; 2689 | -ms-flex-pack: center; 2690 | justify-content: center; 2691 | width: 350px; 2692 | min-height: 189px; 2693 | margin-top: 8px; 2694 | } 2695 | 2696 | .emotion-16 { 2697 | width: 100%; 2698 | -webkit-align-self: flex-start; 2699 | -ms-flex-item-align: start; 2700 | align-self: flex-start; 2701 | } 2702 | 2703 | .emotion-16[aria-disabled="true"] { 2704 | opacity: 0.6; 2705 | } 2706 | 2707 | .emotion-6 { 2708 | display: -webkit-box; 2709 | display: -webkit-flex; 2710 | display: -ms-flexbox; 2711 | display: flex; 2712 | -webkit-flex-direction: column; 2713 | -ms-flex-direction: column; 2714 | flex-direction: column; 2715 | -webkit-box-pack: stretch; 2716 | -webkit-justify-content: stretch; 2717 | -ms-flex-pack: stretch; 2718 | justify-content: stretch; 2719 | margin-bottom: 10px; 2720 | } 2721 | 2722 | .emotion-4 { 2723 | font-size: 13px; 2724 | font-weight: 500; 2725 | margin-bottom: 6px; 2726 | } 2727 | 2728 | .emotion-5 { 2729 | font-size: 14px; 2730 | color: #333333; 2731 | padding: 10px 15px; 2732 | border-radius: 4px; 2733 | -webkit-appearance: none; 2734 | -moz-appearance: none; 2735 | appearance: none; 2736 | outline: none; 2737 | border: 0 none; 2738 | box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; 2739 | } 2740 | 2741 | .emotion-5:focus { 2742 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 2743 | } 2744 | 2745 | .emotion-5:active { 2746 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 2747 | } 2748 | 2749 | .emotion-5[aria-invalid="true"] { 2750 | box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; 2751 | } 2752 | 2753 | .emotion-15 { 2754 | -webkit-align-self: stretch; 2755 | -ms-flex-item-align: stretch; 2756 | align-self: stretch; 2757 | display: -webkit-box; 2758 | display: -webkit-flex; 2759 | display: -ms-flexbox; 2760 | display: flex; 2761 | -webkit-box-pack: justify; 2762 | -webkit-justify-content: space-between; 2763 | -ms-flex-pack: justify; 2764 | justify-content: space-between; 2765 | margin-top: 24px; 2766 | } 2767 | 2768 | .emotion-13 { 2769 | background-color: transparent; 2770 | border: 0 none; 2771 | outline: none; 2772 | -webkit-appearance: none; 2773 | -moz-appearance: none; 2774 | appearance: none; 2775 | font-weight: 500; 2776 | font-size: 12px; 2777 | -webkit-flex-basis: 50%; 2778 | -ms-flex-preferred-size: 50%; 2779 | flex-basis: 50%; 2780 | cursor: pointer; 2781 | padding: 11px 16px; 2782 | border-radius: 4px; 2783 | text-transform: uppercase; 2784 | margin-right: 8px; 2785 | background-color: #1EA7FD; 2786 | color: #FFFFFF; 2787 | opacity: 0.6; 2788 | box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; 2789 | } 2790 | 2791 | .emotion-13:focus { 2792 | -webkit-text-decoration: underline; 2793 | text-decoration: underline; 2794 | font-weight: 700; 2795 | } 2796 | 2797 | .emotion-13:active { 2798 | -webkit-text-decoration: underline; 2799 | text-decoration: underline; 2800 | font-weight: 700; 2801 | } 2802 | 2803 | .emotion-13[aria-disabled="true"] { 2804 | cursor: default; 2805 | } 2806 | 2807 | .emotion-14 { 2808 | background-color: transparent; 2809 | border: 0 none; 2810 | outline: none; 2811 | -webkit-appearance: none; 2812 | -moz-appearance: none; 2813 | appearance: none; 2814 | font-weight: 500; 2815 | font-size: 12px; 2816 | -webkit-flex-basis: 50%; 2817 | -ms-flex-preferred-size: 50%; 2818 | flex-basis: 50%; 2819 | cursor: pointer; 2820 | padding: 11px 16px; 2821 | border-radius: 4px; 2822 | text-transform: uppercase; 2823 | margin-left: 8px; 2824 | box-shadow: rgb(30 167 253) 0 0 0 1px inset; 2825 | color: #1EA7FD; 2826 | } 2827 | 2828 | .emotion-14:focus { 2829 | -webkit-text-decoration: underline; 2830 | text-decoration: underline; 2831 | font-weight: 700; 2832 | } 2833 | 2834 | .emotion-14:active { 2835 | -webkit-text-decoration: underline; 2836 | text-decoration: underline; 2837 | font-weight: 700; 2838 | } 2839 | 2840 | .emotion-14[aria-disabled="true"] { 2841 | cursor: default; 2842 | } 2843 | 2844 |
2847 |
2850 | 2856 | 2857 | Storybook icon 2858 | 2859 | 2866 | 2872 | 2878 | 2883 | 2884 | 2885 | 2891 | 2892 | Storybook 2893 | 2894 | 2898 | 2902 | 2903 | 2904 |
2905 |

2908 | Create an account to join the Storybook community 2909 |

2910 |
2913 |
2921 |
2924 | 2930 | 2943 |
2944 |
2947 | 2953 | 2966 |
2967 |
2970 | 2976 | 2989 |
2990 |
2993 | 3002 | 3010 |
3011 |
3012 |
3013 |
3014 | `; 3015 | 3016 | exports[`Storyshots Demo/AccountForm Verification Success 1`] = ` 3017 | .emotion-18 { 3018 | font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; 3019 | display: -webkit-box; 3020 | display: -webkit-flex; 3021 | display: -ms-flexbox; 3022 | display: flex; 3023 | -webkit-flex-direction: column; 3024 | -ms-flex-direction: column; 3025 | flex-direction: column; 3026 | -webkit-align-items: center; 3027 | -webkit-box-align: center; 3028 | -ms-flex-align: center; 3029 | align-items: center; 3030 | width: 450px; 3031 | padding: 32px; 3032 | background-color: #FFFFFF; 3033 | border-radius: 7px; 3034 | } 3035 | 3036 | .emotion-2 { 3037 | display: -webkit-box; 3038 | display: -webkit-flex; 3039 | display: -ms-flexbox; 3040 | display: flex; 3041 | -webkit-align-items: center; 3042 | -webkit-box-align: center; 3043 | -ms-flex-align: center; 3044 | align-items: center; 3045 | -webkit-box-pack: center; 3046 | -webkit-justify-content: center; 3047 | -ms-flex-pack: center; 3048 | justify-content: center; 3049 | } 3050 | 3051 | .emotion-0 { 3052 | height: 40px; 3053 | z-index: 10; 3054 | margin-left: 32px; 3055 | } 3056 | 3057 | .emotion-1 { 3058 | height: 40px; 3059 | z-index: 1; 3060 | left: -32px; 3061 | position: relative; 3062 | } 3063 | 3064 | .emotion-3 { 3065 | margin-top: 20px; 3066 | text-align: center; 3067 | } 3068 | 3069 | .emotion-17 { 3070 | display: -webkit-box; 3071 | display: -webkit-flex; 3072 | display: -ms-flexbox; 3073 | display: flex; 3074 | -webkit-align-items: flex-start; 3075 | -webkit-box-align: flex-start; 3076 | -ms-flex-align: flex-start; 3077 | align-items: flex-start; 3078 | -webkit-box-pack: center; 3079 | -webkit-justify-content: center; 3080 | -ms-flex-pack: center; 3081 | justify-content: center; 3082 | width: 350px; 3083 | min-height: 189px; 3084 | margin-top: 8px; 3085 | } 3086 | 3087 | .emotion-16 { 3088 | width: 100%; 3089 | -webkit-align-self: flex-start; 3090 | -ms-flex-item-align: start; 3091 | align-self: flex-start; 3092 | } 3093 | 3094 | .emotion-16[aria-disabled="true"] { 3095 | opacity: 0.6; 3096 | } 3097 | 3098 | .emotion-6 { 3099 | display: -webkit-box; 3100 | display: -webkit-flex; 3101 | display: -ms-flexbox; 3102 | display: flex; 3103 | -webkit-flex-direction: column; 3104 | -ms-flex-direction: column; 3105 | flex-direction: column; 3106 | -webkit-box-pack: stretch; 3107 | -webkit-justify-content: stretch; 3108 | -ms-flex-pack: stretch; 3109 | justify-content: stretch; 3110 | margin-bottom: 10px; 3111 | } 3112 | 3113 | .emotion-4 { 3114 | font-size: 13px; 3115 | font-weight: 500; 3116 | margin-bottom: 6px; 3117 | } 3118 | 3119 | .emotion-5 { 3120 | font-size: 14px; 3121 | color: #333333; 3122 | padding: 10px 15px; 3123 | border-radius: 4px; 3124 | -webkit-appearance: none; 3125 | -moz-appearance: none; 3126 | appearance: none; 3127 | outline: none; 3128 | border: 0 none; 3129 | box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; 3130 | } 3131 | 3132 | .emotion-5:focus { 3133 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 3134 | } 3135 | 3136 | .emotion-5:active { 3137 | box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; 3138 | } 3139 | 3140 | .emotion-5[aria-invalid="true"] { 3141 | box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; 3142 | } 3143 | 3144 | .emotion-15 { 3145 | -webkit-align-self: stretch; 3146 | -ms-flex-item-align: stretch; 3147 | align-self: stretch; 3148 | display: -webkit-box; 3149 | display: -webkit-flex; 3150 | display: -ms-flexbox; 3151 | display: flex; 3152 | -webkit-box-pack: justify; 3153 | -webkit-justify-content: space-between; 3154 | -ms-flex-pack: justify; 3155 | justify-content: space-between; 3156 | margin-top: 24px; 3157 | } 3158 | 3159 | .emotion-13 { 3160 | background-color: transparent; 3161 | border: 0 none; 3162 | outline: none; 3163 | -webkit-appearance: none; 3164 | -moz-appearance: none; 3165 | appearance: none; 3166 | font-weight: 500; 3167 | font-size: 12px; 3168 | -webkit-flex-basis: 50%; 3169 | -ms-flex-preferred-size: 50%; 3170 | flex-basis: 50%; 3171 | cursor: pointer; 3172 | padding: 11px 16px; 3173 | border-radius: 4px; 3174 | text-transform: uppercase; 3175 | margin-right: 8px; 3176 | background-color: #1EA7FD; 3177 | color: #FFFFFF; 3178 | opacity: 0.6; 3179 | box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; 3180 | } 3181 | 3182 | .emotion-13:focus { 3183 | -webkit-text-decoration: underline; 3184 | text-decoration: underline; 3185 | font-weight: 700; 3186 | } 3187 | 3188 | .emotion-13:active { 3189 | -webkit-text-decoration: underline; 3190 | text-decoration: underline; 3191 | font-weight: 700; 3192 | } 3193 | 3194 | .emotion-13[aria-disabled="true"] { 3195 | cursor: default; 3196 | } 3197 | 3198 | .emotion-14 { 3199 | background-color: transparent; 3200 | border: 0 none; 3201 | outline: none; 3202 | -webkit-appearance: none; 3203 | -moz-appearance: none; 3204 | appearance: none; 3205 | font-weight: 500; 3206 | font-size: 12px; 3207 | -webkit-flex-basis: 50%; 3208 | -ms-flex-preferred-size: 50%; 3209 | flex-basis: 50%; 3210 | cursor: pointer; 3211 | padding: 11px 16px; 3212 | border-radius: 4px; 3213 | text-transform: uppercase; 3214 | margin-left: 8px; 3215 | box-shadow: rgb(30 167 253) 0 0 0 1px inset; 3216 | color: #1EA7FD; 3217 | } 3218 | 3219 | .emotion-14:focus { 3220 | -webkit-text-decoration: underline; 3221 | text-decoration: underline; 3222 | font-weight: 700; 3223 | } 3224 | 3225 | .emotion-14:active { 3226 | -webkit-text-decoration: underline; 3227 | text-decoration: underline; 3228 | font-weight: 700; 3229 | } 3230 | 3231 | .emotion-14[aria-disabled="true"] { 3232 | cursor: default; 3233 | } 3234 | 3235 |
3238 |
3241 | 3247 | 3248 | Storybook icon 3249 | 3250 | 3257 | 3263 | 3269 | 3274 | 3275 | 3276 | 3282 | 3283 | Storybook 3284 | 3285 | 3289 | 3293 | 3294 | 3295 |
3296 |

3299 | Create an account to join the Storybook community 3300 |

3301 |
3304 |
3312 |
3315 | 3321 | 3334 |
3335 |
3338 | 3344 | 3357 |
3358 |
3361 | 3367 | 3380 |
3381 |
3384 | 3393 | 3401 |
3402 |
3403 |
3404 |
3405 | `; 3406 | 3407 | exports[`Storyshots Docs/ButtonMdx Basic 1`] = ` 3408 | 3413 | `; 3414 | 3415 | exports[`Storyshots Docs/ButtonMdx Controls 1`] = ` 3416 | 3421 | `; 3422 | 3423 | exports[`Storyshots Examples / Button Basic 1`] = ` 3424 | 3429 | `; 3430 | 3431 | exports[`Storyshots Examples / Button CSF 2 Story With Play 1`] = ` 3432 | 3437 | `; 3438 | 3439 | exports[`Storyshots Examples / Button Process Env 1`] = ` 3440 | 3445 | `; 3446 | 3447 | exports[`Storyshots Examples / Button Story No Render 1`] = ` 3448 | 3453 | `; 3454 | 3455 | exports[`Storyshots Examples / Button Story Object 1`] = `"hahaha"`; 3456 | 3457 | exports[`Storyshots Examples / Button Story With Play 1`] = ` 3458 | 3463 | `; 3464 | 3465 | exports[`Storyshots Examples / Button With Args 1`] = ` 3466 | 3471 | `; 3472 | 3473 | exports[`Storyshots Examples / Emoji Button Basic 1`] = ` 3474 | 3480 | `; 3481 | 3482 | exports[`Storyshots Examples / Emoji Button With Args 1`] = ` 3483 | 3489 | `; 3490 | --------------------------------------------------------------------------------