├── .gitignore
├── .prettierrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── index.html
├── package.json
├── src
├── component
│ ├── Canvas
│ │ ├── index.tsx
│ │ └── styles.scss
│ ├── CanvasBlock
│ │ ├── index.tsx
│ │ └── styles.scss
│ ├── Note
│ │ ├── index.tsx
│ │ ├── styles.scss
│ │ └── svg-definitions.tsx
│ └── svg
│ │ ├── Clipboard
│ │ ├── index.tsx
│ │ └── style.scss
│ │ ├── Computer
│ │ ├── index.tsx
│ │ └── style.scss
│ │ ├── Favorite
│ │ ├── index.tsx
│ │ └── style.scss
│ │ ├── Link
│ │ ├── index.tsx
│ │ └── style.scss
│ │ ├── Megaphone
│ │ ├── index.tsx
│ │ └── style.scss
│ │ ├── Notification
│ │ ├── index.tsx
│ │ └── style.scss
│ │ ├── ShoppingCartAdd
│ │ ├── index.tsx
│ │ └── style.scss
│ │ ├── Tag
│ │ ├── index.tsx
│ │ └── style.scss
│ │ └── Users
│ │ ├── index.tsx
│ │ └── style.scss
├── main.tsx
├── state
│ ├── index.tsx
│ └── manager.tsx
├── utility
│ ├── cn.ts
│ ├── min-width.scss
│ └── storage.ts
└── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | !.vscode/extensions.json
2 | .DS_Store
3 | .env
4 | .env.development.local
5 | .env.local
6 | .env.production.local
7 | .env.test.local
8 | .idea
9 | .pnp.js
10 | .vscode/*
11 | *.local
12 | *.log
13 | *.njsproj
14 | *.ntvs*
15 | *.sln
16 | *.suo
17 | *.sw?
18 | /.pnp
19 | /build
20 | /coverage
21 | dist
22 | dist-ssr
23 | lerna-debug.log*
24 | logs
25 | node_modules
26 | npm-debug.log*
27 | package-lock.js
28 | pnpm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 80,
3 | "tabWidth": 2,
4 | "useTabs": false,
5 | "semi": true,
6 | "singleQuote": true,
7 | "trailingComma": "none",
8 | "bracketSpacing": true,
9 | "jsxBracketSameLine": true,
10 | "quoteProps": "consistent"
11 | }
12 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Thank you for your interest in this project!
4 |
5 | ## Philosophy
6 |
7 | 1. [First principles](https://medium.com/@ameet/what-musk-bezos-thiel-and-feynman-teach-us-about-first-principles-261967d3e347) guide the development of this project
8 | 2. [Category](https://www.youtube.com/watch?v=jBkO1eerU8A) [theory](https://www.youtube.com/watch?v=-FkgOHvNAU8&t=0s&index=2&list=PLwuUlC2HlHGe7vmItFmrdBLn6p0AS8ALX) helps us think about and apply first principles
9 | 3. Design decisions should not be made if they don't have to be
10 |
11 | ## Code Patterns
12 |
13 | Code Patterns are *very* important. Documentation is TBD. Please infer based on existing code for now.
14 |
15 | ## Dependencies
16 |
17 | * Will be added only as needed
18 | * Should be secure, up to date, and actively maintained
19 | * Should be selected after comparison with other libraries
20 |
21 | A great tool for vetting libraries is https://npms.io
22 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Stephen Bussard
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.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Canvas-sketch
2 |
3 | A web app to sketch out a [business model canvas](https://en.wikipedia.org/wiki/Business_Model_Canvas).
4 |
5 | [The app is available free online](https://sbussard.github.io/canvas-sketch/).
6 |
7 | ## Environment
8 |
9 | `node` and `yarn`
10 |
11 | | Variable | Required | Value |
12 | | ------------------- | -------------- | --------------------------------- |
13 | | GOOGLE_ANALYTICS_ID | For Production | Your Google Analytics property id |
14 |
15 | ## Install
16 |
17 | `yarn`
18 |
19 | ## Develop
20 |
21 | `yarn dev`
22 |
23 | ## Build
24 |
25 | `yarn build`
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Canvas Sketch
8 |
9 |
10 |
18 |
19 |
117 |
118 |
119 |
120 |
121 |
122 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "canvas-sketch",
3 | "private": true,
4 | "version": "0.3.0",
5 | "homepage": "https://sbussard.github.io/canvas-sketch/",
6 | "type": "module",
7 | "scripts": {
8 | "dev": "vite",
9 | "build": "tsc && vite build",
10 | "preview": "vite preview",
11 | "predeploy": "yarn build",
12 | "deploy": "gh-pages -d dist"
13 | },
14 | "dependencies": {
15 | "@types/node": "^18.11.9",
16 | "gh-pages": "^4.0.0",
17 | "immer": "^9.0.16",
18 | "react": "^18.2.0",
19 | "react-dom": "^18.2.0",
20 | "sass": "^1.56.1",
21 | "vite-plugin-html": "^3.2.0"
22 | },
23 | "devDependencies": {
24 | "@types/react": "^18.0.24",
25 | "@types/react-dom": "^18.0.8",
26 | "@vitejs/plugin-react": "^2.2.0",
27 | "typescript": "^4.6.4",
28 | "vite": "^3.2.3"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/component/Canvas/index.tsx:
--------------------------------------------------------------------------------
1 | import CanvasBlock from 'src/component/CanvasBlock';
2 |
3 | import Clipboard from 'src/component/svg/Clipboard';
4 | import Computer from 'src/component/svg/Computer';
5 | import Favorite from 'src/component/svg/Favorite';
6 | import Link from 'src/component/svg/Link';
7 | import Megaphone from 'src/component/svg/Megaphone';
8 | import Notification from 'src/component/svg/Notification';
9 | import ShoppingCartAdd from 'src/component/svg/ShoppingCartAdd';
10 | import Tag from 'src/component/svg/Tag';
11 | import Users from 'src/component/svg/Users';
12 | import useAppState from 'src/state';
13 | import './styles.scss';
14 |
15 | const icons = [
16 | Link,
17 | Clipboard,
18 | Computer,
19 | Favorite,
20 | Notification,
21 | Megaphone,
22 | Users,
23 | Tag,
24 | ShoppingCartAdd
25 | ];
26 |
27 | export default function Canvas() {
28 | const { state } = useAppState();
29 |
30 | return (
31 |
32 | {state.map(({ name }, boxIndex) => (
33 |
34 | ))}
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/component/Canvas/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'src/utility/min-width';
2 |
3 | @mixin VerticalList {
4 | display: grid;
5 | grid-gap: 0.25em;
6 | }
7 |
8 | @mixin TwoColumns {
9 | display: grid;
10 | grid-template-columns: repeat(2, 1fr);
11 |
12 | > *:last-child {
13 | grid-column: 1/3;
14 | }
15 | }
16 |
17 | @mixin BusinessModelCanvas {
18 | display: grid;
19 | grid-template-columns: repeat(10, 1fr);
20 | grid-template-rows: repeat(3, 1fr);
21 | grid-gap: 0.25em;
22 |
23 | > * {
24 | &:nth-child(1) {
25 | grid-column: 1/3;
26 | grid-row: 1/3;
27 | }
28 |
29 | &:nth-child(2) {
30 | grid-column: 3/5;
31 | grid-row: 1/2;
32 | }
33 |
34 | &:nth-child(3) {
35 | grid-column: 3/5;
36 | grid-row: 2/3;
37 | }
38 |
39 | &:nth-child(4) {
40 | grid-column: 5/7;
41 | grid-row: 1/3;
42 | }
43 |
44 | &:nth-child(5) {
45 | grid-column: 7/9;
46 | grid-row: 1/2;
47 | }
48 |
49 | &:nth-child(6) {
50 | grid-column: 7/9;
51 | grid-row: 2/3;
52 | }
53 |
54 | &:nth-child(7) {
55 | grid-column: 9/11;
56 | grid-row: 1/3;
57 | }
58 |
59 | &:nth-child(8) {
60 | grid-column: 1/6;
61 | }
62 |
63 | &:nth-child(9) {
64 | grid-column: 6/11;
65 | }
66 | }
67 | }
68 |
69 | .Canvas {
70 | width: 100%;
71 | padding: 1em;
72 |
73 | @include VerticalList;
74 |
75 | @include min-width(600px) {
76 | @include TwoColumns;
77 | }
78 |
79 | @include min-width(1000px) {
80 | @include BusinessModelCanvas;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/component/CanvasBlock/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import useAppState from 'src/state';
3 | import Note from 'src/component/Note';
4 | import './styles.scss';
5 |
6 | import type { MouseEvent } from 'react';
7 |
8 | export default ({ Icon, boxIndex }: { Icon: any; boxIndex: number }) => {
9 | const { state, addBlockItem, removeBlockItem } = useAppState();
10 | const { name, data } = state[boxIndex];
11 |
12 | const handleAddClick = (event: MouseEvent) => {
13 | const item = prompt(`Enter new ${state[boxIndex].name} item`);
14 | if (!item) return;
15 | addBlockItem(boxIndex, item);
16 | };
17 |
18 | const handleRemoveClick = (event: MouseEvent) => {
19 | const index = Number(event.currentTarget.dataset.index);
20 | const proceed = confirm(`Remove item "${state[boxIndex].data[index]}"?`);
21 | if (!proceed) return;
22 | removeBlockItem(boxIndex, index);
23 | };
24 |
25 | return (
26 |
27 |
28 | {name}
29 |
32 |
33 |
34 |
35 | {data.map((item: string, index: number) => (
36 |
42 | ))}
43 |
44 |