Skip to content
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions .storybook/addons.js

This file was deleted.

20 changes: 0 additions & 20 deletions .storybook/config.js

This file was deleted.

19 changes: 19 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials', // Includes actions, backgrounds, controls, docs, viewport, toolbars
'@storybook/addon-interactions', // For play functions
'@storybook/addon-console',
'@storybook/addon-storysource',
// 'storybook-addon-jsx', // Commenting out for now, will check compatibility later if needed
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag', // Enable autodocs for tagged components
},
staticDirs: ['../public'], // Replicates -s public, assuming nes.css is imported or handled by vite-plugin-static-copy
};
39 changes: 39 additions & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// Import global CSS. This path should be accessible during Storybook build/dev.
// Since vite.config.ts copies src/assets/nes.css to lib/assets/nes.css,
// and Storybook runs from the project root, this import should resolve correctly
// IF components are expected to import it this way OR if it's for Storybook's own UI.
// However, for components in the library, they might rely on CSS modules or
// the lib consumer to include nes.css.
// For Storybook's own preview area, importing it here makes sense.
import '../src/assets/nes.css';

// Attempt to migrate setConsoleOptions
// The addon-console might pick up parameters automatically or via a dedicated parameter.
// Checking addon-console documentation, it seems it might not need explicit setup here anymore for panelExclude.
// If console filtering is needed, it can be set using `parameters.console`.
// For now, we'll omit explicit setConsoleOptions as it was from Storybook v5 structure.

export const parameters = {
// actions: { argTypesRegex: "^on[A-Z].*" }, // Default in addon-essentials
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
// Example for console addon parameter if needed:
// console: {
// panelExclude: [],
// },
docs: {
// Ensures that the docs addon is configured (though autodocs in main.js is the primary switch)
}
};

// Global decorators can be added here if needed.
// The `withPropsTable` from storybook-addon-react-docgen is not used with Vite.
// Component documentation (props tables) should be generated by addon-docs with react-vite.
export const decorators = [
// Add any global decorators from the old config if they are still relevant
// e.g., if there was a global wrapper component
];
17 changes: 0 additions & 17 deletions .storybook/webpack.config.js

This file was deleted.

75 changes: 26 additions & 49 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,18 @@
"version": "0.0.9",
"dependencies": {
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-scripts": "3.4.1",
"styled-components": "^5.1.0",
"webfontloader": "^1.6.28"
"react-dom": "^16.10.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:nes": "rm -rf ./lib && rollup -c && tsc",
"build:ts": "tsc",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"start": "storybook dev -p 9009 -c .storybook -s public",
"dev:vite": "vite",
"build": "vite build",
"test": "jest",
"storybook": "storybook dev -p 9009 -c .storybook -s public",
"build-storybook": "storybook build -c .storybook -s public",
"lint": "eslint 'src/**/*.{ts,tsx}'",
"lint:prettier": "prettier --check './src/**/*.{js,ts,tsx}'",
"predeploy": "build-storybook",
"predeploy": "yarn build-storybook",
"deploy": "gh-pages -d storybook-static"
},
"eslintConfig": {
Expand All @@ -38,32 +33,24 @@
]
},
"devDependencies": {
"@rollup/plugin-multi-entry": "^3.0.0",
"@storybook/addon-actions": "^5.2.4",
"@storybook/addon-console": "^1.2.1",
"@storybook/addon-docs": "^5.2.4",
"@storybook/addon-info": "^5.2.4",
"@storybook/addon-knobs": "^5.2.4",
"@storybook/addon-links": "^5.2.4",
"@storybook/addon-storysource": "^5.2.4",
"@storybook/addon-viewport": "^5.2.4",
"@storybook/addons": "^5.2.4",
"@storybook/cli": "^5.2.4",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^5.2.4",
"@svgr/rollup": "^5.3.1",
"@storybook/addon-essentials": "^8.6.14",
"@storybook/addon-interactions": "^8.6.14",
"@storybook/addon-links": "^8.6.14",
"@storybook/blocks": "^8.6.14",
"@storybook/builder-vite": "^8.6.14",
"@storybook/react": "^8.6.14",
"@storybook/react-vite": "^8.6.14",
"@storybook/testing-library": "^0.2.2",
"@testing-library/react": "^10.0.3",
"@types/glob": "^7.0.0",
"@types/jest": "25.2.2",
"@types/node": "14.0.3",
"@types/react": "16.9.35",
"@types/react-dom": "16.9.8",
"@types/react-test-renderer": "^16.9.1",
"@types/storybook__addon-info": "^5.2.1",
"@types/storybook__react": "^5.2.1",
"@types/styled-components": "^5.1.0",
"@types/webfontloader": "^1.6.29",
"@typescript-eslint/eslint-plugin": "^3.0.0",
"@typescript-eslint/parser": "^3.0.0",
"@vitejs/plugin-react": "^4.5.0",
"add": "^2.0.6",
"eslint": "^6.6.0",
"eslint-config-prettier": "^6.5.0",
Expand All @@ -76,37 +63,27 @@
"eslint-plugin-react-hooks": "^4.0.0",
"fs-extra": "^9.0.0",
"gh-pages": "^3.0.0",
"glob": "^7.1.6",
"glob": "^7.0.0",
"husky": "^4.2.5",
"jest": "^25.4.0",
"jest-dom": "^4.0.0",
"lint-staged": "^10.1.7",
"prettier": "^2.0.5",
"react-docgen-typescript-loader": "^3.3.0",
"react-test-renderer": "^16.11.0",
"rollup": "^2.12.1",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-sourcemaps": "^0.6.0",
"rollup-plugin-terser": "^6.0.0",
"rollup-plugin-typescript2": "^0.27.0",
"rollup-plugin-url": "^3.0.1",
"storybook-addon-jsx": "^7.1.6",
"storybook-addon-react-docgen": "^1.2.28",
"stylelint": "^13.3.3",
"stylelint-config-styled-components": "^0.1.1",
"ts-jest": "^26.0.0",
"typescript": "^3.7.4",
"typescript": "^5.8.3",
"vite": "^6.3.5",
"vite-plugin-dts": "^4.5.4",
"vite-plugin-lib-inject-css": "^2.2.2",
"vite-plugin-static-copy": "^3.0.0",
"vite-plugin-svgr": "^4.3.0",
"yarn": "^1.22.0"
},
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^4.4.0"
"react-dom": "^16.8.6"
}
}
45 changes: 45 additions & 0 deletions src/Tag/Tag.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
.toolTag {
background: #eee;
border-radius: 3px 0 0 3px;
color: #999;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
}

.toolTag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}

.toolTag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}

.toolTag:hover {
background-color: #000000;
color: white;
}

.toolTag:hover::after {
border-left-color: #000000;
}
48 changes: 4 additions & 44 deletions src/Tag/index.tsx
Original file line number Diff line number Diff line change
@@ -1,58 +1,18 @@
import * as React from 'react';
import '../assets/nes.css';
import styled from 'styled-components';
import styles from './Tag.module.css';

type Props = {
textType: 'primary' | 'success' | 'warning' | 'error';
item: string;
};

const ToolTag = styled.span`
background: #eee;
border-radius: 3px 0 0 3px;
color: #999;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}
::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}
:hover {
background-color: #000000;
color: white;
}
:hover::after {
border-left-color: #000000;
}
`;

export class NesTag extends React.Component<Props> {
render() {
const { textType, item } = this.props;
const textClass = `nes-text is-${textType}`;
return <ToolTag className={textClass}>{item}</ToolTag>;
// Combine the CSS module class for the tag's structure and the nes.css classes for text styling
const combinedClassName = `${styles.toolTag} ${textClass}`;
return <span className={combinedClassName}>{item}</span>;
}
}
21 changes: 10 additions & 11 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,41 +1,40 @@
{
"compilerOptions": {
"module": "esnext",
"module": "ESNext",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"target": "ES2020",
"moduleResolution": "bundler",
"strict": false,
"alwaysStrict": true,
"removeComments": false,
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "./lib",
"baseUrl": ".",
"lib": [
"dom",
"esnext"
"DOM",
"DOM.Iterable",
"ESNext"
],
"allowJs": false,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"importHelpers": true,
"noEmitOnError": false,
"declaration": true,
"declarationDir": "lib",
"jsx": "react",
"jsx": "react-jsx",
"allowSyntheticDefaultImports": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"src/**/*"
"src",
"vite.config.ts"
],
"exclude": [
"node_modules",
"lib",
"rollup.config.js",
"storybook-static",
"src/stories/*",
"src/__tests__/*",
"src/assets/*"
Expand Down
Loading