Skip to content

Commit

Permalink
refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
yannbf committed Aug 3, 2023
1 parent 603c1fb commit 38cc6d2
Show file tree
Hide file tree
Showing 55 changed files with 245 additions and 68 deletions.
2 changes: 1 addition & 1 deletion pnpm/react-vite/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "before-storybook",
"name": "pnpm-react-vite",
"private": true,
"version": "0.0.0",
"type": "module",
Expand Down
2 changes: 1 addition & 1 deletion yarn-pnp/react-vite/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "before-storybook",
"name": "yarn-pnp-react-vite",
"private": true,
"version": "0.0.0",
"type": "module",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "react-vite",
"name": "react-vite-app",
"private": true,
"version": "0.0.0",
"type": "module",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Meta, StoryObj } from '@storybook/react';

import { Button } from './Button';
// a component which comes from a separate package
import { Button } from '../../../react-vite-components/src/components/Button';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@ export const Button = ({
label,
...props
}: ButtonProps) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
const mode = primary ? 'app-storybook-button--primary' : 'app-storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
className={['app-storybook-button', `app-storybook-button--${size}`, mode].join(' ')}
style={{ backgroundColor }}
{...props}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.storybook-button {
.app-storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
Expand All @@ -7,24 +7,24 @@
display: inline-block;
line-height: 1;
}
.storybook-button--primary {
.app-storybook-button--primary {
color: white;
background-color: #1ea7fd;
}
.storybook-button--secondary {
.app-storybook-button--secondary {
color: #333;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.storybook-button--small {
.app-storybook-button--small {
font-size: 12px;
padding: 10px 16px;
}
.storybook-button--medium {
.app-storybook-button--medium {
font-size: 14px;
padding: 11px 20px;
}
.storybook-button--large {
.app-storybook-button--large {
font-size: 16px;
padding: 12px 24px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
24 changes: 24 additions & 0 deletions yarn-workspaces-monorepo/packages/react-vite-components/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
13 changes: 13 additions & 0 deletions yarn-workspaces-monorepo/packages/react-vite-components/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "react-vite-components",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import './button.css';

interface ButtonProps {
/**
* Is this the principal call to action on the page?
*/
primary?: boolean;
/**
* What background color to use
*/
backgroundColor?: string;
/**
* How large should the button be?
*/
size?: 'small' | 'medium' | 'large';
/**
* Button contents
*/
label: string;
/**
* Optional click handler
*/
onClick?: () => void;
}

/**
* Primary UI component for user interaction
*/
export const Button = ({
primary = false,
size = 'medium',
backgroundColor,
label,
...props
}: ButtonProps) => {
const mode = primary ? 'component-storybook-button--primary' : 'component-storybook-button--secondary';
return (
<button
type="button"
className={['component-storybook-button', `component-storybook-button--${size}`, mode].join(' ')}
style={{ backgroundColor }}
{...props}
>
{label}
</button>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.component-storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
border-radius: 3em;
cursor: pointer;
display: inline-block;
line-height: 1;
}
.component-storybook-button--primary {
color: white;
background-color: red;
}
.component-storybook-button--secondary {
color: #333;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.component-storybook-button--small {
font-size: 12px;
padding: 10px 16px;
}
.component-storybook-button--medium {
font-size: 14px;
padding: 11px 20px;
}
.component-storybook-button--large {
font-size: 16px;
padding: 12px 24px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
23 changes: 0 additions & 23 deletions yarn-workspaces-monorepo/packages/react-vite/README.md

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
stories: [
"../../react-vite/src/**/*.mdx",
"../../react-vite/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
"../../react-vite-app/src/**/*.mdx",
"../../react-vite-app/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
{
directory: "../src/stories",
},
Expand Down
23 changes: 0 additions & 23 deletions yarn-workspaces-monorepo/packages/storybook-app/README.md

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@storybook/blocks": "^7.2.0",
"@storybook/react": "^7.2.0",
"@storybook/react-vite": "^7.2.0",
"@storybook/test-runner": "0.12.1--canary.339.848d743.0",
"@storybook/test-runner": "0.12.1--canary.339.90fb7b2.0",
"@storybook/testing-library": "^0.2.0",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
Expand Down
Loading

0 comments on commit 38cc6d2

Please sign in to comment.