refactor: remove style.developomp.com
This commit is contained in:
parent
5ab6b93fa3
commit
4694e6799d
11 changed files with 1069 additions and 7966 deletions
|
@ -10,9 +10,6 @@
|
||||||
],
|
],
|
||||||
"blog": [
|
"blog": [
|
||||||
"developomp-site-blog"
|
"developomp-site-blog"
|
||||||
],
|
|
||||||
"style": [
|
|
||||||
"developomp-site-style"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,7 +23,6 @@ A monorepo ([Turborepo](https://turbo.build)) of my websites for blogging, portf
|
||||||
- `aps`
|
- `aps`
|
||||||
- `main` - https://developomp.com
|
- `main` - https://developomp.com
|
||||||
- `blog` - https://blog.developomp.com
|
- `blog` - https://blog.developomp.com
|
||||||
- `style` - https://style.developomp.com
|
|
||||||
- `packages` - packages prefixed with `@developomp-site/`
|
- `packages` - packages prefixed with `@developomp-site/`
|
||||||
- `components-react` - ReactJS components
|
- `components-react` - ReactJS components
|
||||||
- `eslint-config` - ESLint configuration files
|
- `eslint-config` - ESLint configuration files
|
||||||
|
|
|
@ -1,4 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
extends: ["developomp-site"],
|
|
||||||
}
|
|
|
@ -1,27 +0,0 @@
|
||||||
const path = require("path")
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.tsx"],
|
|
||||||
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
|
|
||||||
framework: "@storybook/react",
|
|
||||||
core: {
|
|
||||||
builder: "@storybook/builder-vite",
|
|
||||||
},
|
|
||||||
async viteFinal(config, { configType }) {
|
|
||||||
// customize the Vite config here
|
|
||||||
return {
|
|
||||||
...config,
|
|
||||||
resolve: {
|
|
||||||
alias: [
|
|
||||||
{
|
|
||||||
find: "@developomp-site/components-react",
|
|
||||||
replacement: path.resolve(
|
|
||||||
__dirname,
|
|
||||||
"../../../packages/components-react/"
|
|
||||||
),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
|
@ -1,32 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@developomp-site/style",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"dev": "start-storybook -p 6006",
|
|
||||||
"build": "build-storybook --docs",
|
|
||||||
"preview-storybook": "serve storybook-static",
|
|
||||||
"clean": "rm -rf .turbo && rm -rf node_modules"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@developomp-site/components-react": "workspace:*",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-dom": "^18.2.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@developomp-site/eslint-config": "workspace:*",
|
|
||||||
"@developomp-site/tsconfig": "workspace:*",
|
|
||||||
"@developomp-site/theme": "workspace:*",
|
|
||||||
"@developomp-site/utils": "workspace:*",
|
|
||||||
"@storybook/addon-actions": "^6.5.14",
|
|
||||||
"@storybook/addon-docs": "^6.5.14",
|
|
||||||
"@storybook/addon-essentials": "^6.5.14",
|
|
||||||
"@storybook/addon-links": "^6.5.14",
|
|
||||||
"@storybook/builder-vite": "^0.1.41",
|
|
||||||
"@storybook/react": "^6.5.14",
|
|
||||||
"@vitejs/plugin-react": "^1.3.2",
|
|
||||||
"serve": "^13.0.4",
|
|
||||||
"typescript": "^4.9.4",
|
|
||||||
"vite": "^2.9.15"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,20 +0,0 @@
|
||||||
import { Button } from "@developomp-site/components-react/src"
|
|
||||||
import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs"
|
|
||||||
|
|
||||||
<Meta title="Components/Button" component={Button} />
|
|
||||||
|
|
||||||
# Button
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam nisl nunc euismod.
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={Button} />
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Default">
|
|
||||||
<Button>Hello</Button>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
|
@ -1,25 +0,0 @@
|
||||||
import { Meta } from "@storybook/addon-docs"
|
|
||||||
|
|
||||||
<Meta title="Introduction" />
|
|
||||||
|
|
||||||
# Introduction
|
|
||||||
|
|
||||||
Hello! Welcome to developomp's design system!
|
|
||||||
|
|
||||||
## What is this?
|
|
||||||
|
|
||||||
This is a [Storybook](https://storybook.js.org) of style guidelines and
|
|
||||||
reference component implementations made in [ReactJS](https://reactjs.org) made
|
|
||||||
primarily for websites under the [developomp.com](https://developomp.com)
|
|
||||||
domain.
|
|
||||||
|
|
||||||
## What is "developomp style"?
|
|
||||||
|
|
||||||
The developomp style is the "theme" used in my design system, and is a set of
|
|
||||||
visual elements such as colors, font styles, and spacing. These elements are
|
|
||||||
then combined appropriately to create a coherent look across my websites.
|
|
||||||
|
|
||||||
## Source Code
|
|
||||||
|
|
||||||
You can find all the source code on
|
|
||||||
[GitHub](https://github.com/developomp/developomp-site)
|
|
|
@ -1,58 +0,0 @@
|
||||||
import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs"
|
|
||||||
import darkTheme from "@developomp-site/theme/dist/dark.json"
|
|
||||||
|
|
||||||
<Meta title="Colors" />
|
|
||||||
|
|
||||||
# Colors
|
|
||||||
|
|
||||||
## Layers
|
|
||||||
|
|
||||||
```
|
|
||||||
┌────────────────────┐
|
|
||||||
│ Header │
|
|
||||||
╞════════════════════╡
|
|
||||||
│ │
|
|
||||||
│ ┌────────────────┐ │ header ━━━
|
|
||||||
│ │ │ │ interactives ━━ ━
|
|
||||||
│ │ [Interactives] │ │ ---> contents ━ ━━━ ━━
|
|
||||||
│ │ │ │ ---> cards ━━━━━━━━━━━━━━━━━
|
|
||||||
│ │ │ │ footer ━━━━
|
|
||||||
│ │ Contents │ │ background ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
||||||
│ │ │ │
|
|
||||||
│ └────────────────┘ │
|
|
||||||
│ │
|
|
||||||
├────────────────────┤
|
|
||||||
│ Footer │
|
|
||||||
└────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
## Dark Theme
|
|
||||||
|
|
||||||
<ColorPalette>
|
|
||||||
<ColorItem
|
|
||||||
title="Header"
|
|
||||||
colors={{
|
|
||||||
"background (custom)": darkTheme.component.header.color.background,
|
|
||||||
"hover (zinc-700)": darkTheme.component.header.color.hover,
|
|
||||||
"text (zinc-300)": darkTheme.component.header.color.text,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorItem
|
|
||||||
title="Scroll Progress Bar"
|
|
||||||
colors={{
|
|
||||||
"background (zinc-600)":
|
|
||||||
darkTheme.component.scrollProgressBar.color.background,
|
|
||||||
"foreground (zinc-300)":
|
|
||||||
darkTheme.component.scrollProgressBar.color.foreground,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorItem
|
|
||||||
title="Links"
|
|
||||||
colors={{
|
|
||||||
"default (blue-400)": "#60a5fa",
|
|
||||||
"hover (blue-500)": "#3b82f6",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</ColorPalette>
|
|
||||||
|
|
||||||
## Light Theme
|
|
|
@ -1,5 +0,0 @@
|
||||||
import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs"
|
|
||||||
|
|
||||||
<Meta title="Fonts" />
|
|
||||||
|
|
||||||
# Fonts
|
|
|
@ -23,18 +23,6 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"ignore": ["**/.*"]
|
"ignore": ["**/.*"]
|
||||||
},
|
|
||||||
{
|
|
||||||
"target": "style",
|
|
||||||
"cleanUrls": true,
|
|
||||||
"public": "apps/style/storybook-static",
|
|
||||||
"rewrites": [
|
|
||||||
{
|
|
||||||
"source": "**",
|
|
||||||
"destination": "/index.html"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"ignore": ["**/.*"]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
8848
pnpm-lock.yaml
generated
8848
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue